آموزش طراحی قالب وردپرس

[Cpanelcenter]

جلس پنچم :

سلام

مثل همیشه میریم به فولدر amoozesh
wamp رو هم باز میکنیم و با مرورگرمون به صفحه اول سایتمون میریم.
سایت ما الان یه خط در بالای صفحه داره که اسم سایت رو نوشته و با کلیک بر روی این لینک به صفحه اصلی سایت منتقل میشیم.
ما در درس قبل کد زیر رو نوشتیم:

<a href=”<?PHP bloginfo(‘url’);?>”><?PHP bloginfo(‘name’);?></a>

خوب تا اینجارو نگه دارین!

یه سوال!

میدونین heading چیه؟

heading همون title یا عنوان است!

اگه شما میخواستین یک تگ بسازین که نشون دهنده ی heading باشه چه میکردین؟ قطعا تگی به صورت <hx> که x عدد است ، ایده ی بدی نیست!

در XHTML تگ هایی با عنوان های زیر داریم که هرچه عدد بزرگتر میشود از قدرت و اندازه نوشته ی بین دو تگ کم میشه

 <h1> </h1>
  <h2> </h2>
 <h3> </h3>
 <h4> </h4>
 <h5> </h5>
 <h6> </h6>

قطه مشترک همه این تگ های اچ دار!!!! اینه که عنوان هستن!

یعنی حتی h6 که کوچکترینشون است به هر حال متمایز از نوشته های دیگر ماست و bold است!!

خوب ما برای اینکه بخواهیم اسم سایتمون بزرگتر از نوشته های معمولی دیگه باشه کدی که ریروز نوشتیم رو بین دو تگ h1 قرار میدیم یعنی داریم:

<h1><a href=”<?PHP bloginfo(‘url’);?>”><?PHP bloginfo(‘name’);?></a></h1>

وقتی این کار رو کردیم میریم و تغییرات رو توی صفحه اصلی سایت میبینیم!

این از کار اولی!

کار بعئی ما اینه که توضیحاتی رو که موقع نصب برای وبلاگ نوشتیم ( و البته همیشه هم میتونیم در قسمت تنظیمات تغییرش بدیم!) رو بارگذاری کنیم و زیر اسم سایت توضیحات رو اضافه کنیم!

برای اینکار حتما میدونین که باید از چه تابعی استفاده کنیم؟!

از اونجایی که توضیحات سایت از جمله اطلاعات (info) مربوط به سایت هستن پس از تابع ()bloginfo استفاده میکنیم!و فقط کافیه آرگومان تابع رو “توضیحات” (description) بنویسیم:

<?php bloginfo(’description’); ?>

ین کد رو بلافاصله بعد از کد قبلی نوشتیم وفایل رو سیو میکنیم ومیریم ببینیم سایتمون چه تغییری کرده!

میبینیم که توضیحاتی در زیر اسم سایت اومده که البته زیادی کوچیکه و جلوه ی لازم رو نداره!

برای حل این مشکل از تگ H2 استفاده میکنیم:

 <h2><?php bloginfo(’description’); ?></h2>

و دوباره سیو میکنیم و میبینیم چه کرده ایم!

میبینیم که نوشته ی ما کمی از نام سایت که مهم تر است کوچکتر و از نوشته های معمولی بزرگتر خواهد بود!

از درسهای قبل یاد گرفتیم که php?> شروع یک کد به زبان php رو نشون میده و bloginfo تابعی است که اطلاعات سایت ما رو در بر داره!

ما در اینجا به توضیحاتی در مورد سایت نیاز داشتیم و معادل انگلیسی این کلمه (description) رو در بین دو پرانتز این تابع نوشتیم!

یک نکته دیگه رو بگم!

یادتون هست که گفتم همه ی تابع های php باید یک پرانتز باز و بسته () داشته باشند! حتی اگه چیزی بینشون نباشه!؟

برای اثبات این مساله که ممکن هست که جلوی تابع چیزی نوشته نشده باشه به این نکته توجه کنین که اگر در تابع bloginfo هیچ آرگومانی ننویسیم (یعنی بین دو پرانتز چیزی نباشه) تابع اسم وبلاگ رو بر به ما میده یعنی نوشتن name یا ننوشتن اون هیچ فرقی نداره و تنها سودی که نوشتنش داره اینه که از گیجینگ (گیج شدن) جلوگیری میکنه!

این هم از این!

حالا میریم سراغ تگی که بسیار باهاش کار خواهیم داشت و اساسی هم کار خواهیم داشت!

تگ <div> کار مهمی به عهده داره و اون اینه که یک جعبه ی نا مرئی برای ما میسازه! یعنی یک حدودی رو معین میکنه که کدهای مربوط رو در خودش جا میده

حالا تمام کدهایی که نوشتیم یعنی همین دو خط ناقابل رو بین این تگ قرار بدین لطفا پلیض!

تا داشته باشیم:

<div>
<h1><a href=”<?PHP bloginfo(‘url’);?>”><?PHP bloginfo(‘name’);?></a></h1>
<h2><?PHP bloginfo(‘description’);?></h2>
</div>

ه ذخیره کنید و برین سایت رو ببینید میبینید که هیچ تغییری نمیبینید! چون گفتم که این تگ نامرئی است و چشم بصیرت میخواهد دیدنش!

خوب شاید بپرسین که فایده ی این کار چی بود؟!

من هم جواب میدم فایده ی این کار این است که ما میتونیم به این تگ یک اسم بدیم!

بعد ها کلی با این اسم دادن ها کار خواهیم داشت و میفهمیم که بدون این اسم هیچ کاری نمیشه کرد!

ما به کل کدهایی که نوشتیم اسم header رو میدیم ، چرا؟ چونکه همه چیزهایی که نوشتیم مربوط به سر تیتر و عنوان صفحه ما بود!

نحوه ی نامگذاری این بچه
dvi
به این صورت است که میبینید

<div id=”header”>

ی؟ یعنی قبل از اینکه < بنویسیم یک id یا شناسه به تگ میدیم تا بدونیم که هرچی بین این تگ تا <div/> است مربوط به header سایت است!

البته با ذخیره کردن و refresh کردن سایت میبینیم که هیچ تغییری نداریم در حالی که خودمون میدونیم داریم!!

حالا ما تا امروز رسیدیم به اینجا که میبینید

<div id=”header”>
<h1><a href=”<?PHP bloginfo(‘url’);?>”><?PHP bloginfo(‘name’);?></a></h1>
<h2><?PHP bloginfo(‘description’);?></h2>
</div>

خوب برای امروز بس میباشد!

مواظب دلتون باشین!

بای

[Cpanelcenter]

جلس ششم :

سلام
اول از همه چیز یک تشکر از مدیر انجمن
GOD
که حمایت کرد مارو در گذاشتن این آموزش .
و دوم از همه ممنون از همه دوستان و همکاران گرامی بابت تشکرات شما دوستان

wamp،مرورگر وب و فولدر آموزش ما مثل همیشه باز هستن تا درس شماره ۵ رو شروع کنیم!
نفس عمیق!
در درس قبلی ساخت هدر رو تموم کردیم و حالا میخواهیم بریم پایین!
یک تگ نامرئی(div) زیر هدر میسازیم و id اون رو content می نهیم!!! که معنای محتوا رو میده!
در مجموع جلسه قبل و امروز داریم:

همه چیز فکر میکنم واضح بوده و هست فقط یه نکته در مورد کد نویسی و اون اینکه این فاصله هایی که من میدم و شما هم انشاالله میدهید برای چک کردن و دوباره خواندن کد در آینده به ما کمک زیادی میکنه تا گیج نشیم! توجه داشته باشین که به جای استفاده از کلید space برای فاصبه های زیاد مثل خط دوم و سوم این کد از کلید tab استفاده کنید!

خوب حالا در content کد زیر را بنویسید.

<?PHP if (have_posts() ) : while (have_posts() ) : the_post(); ?>

<?PHP endwhile; ?>

<?PHP endif ?>

میدونین حلقه چیه؟

حلقه یعنی اینکه تا زمانی که به چیزی که مد نظر ماست برسیم یک کد تکرار میشه!

الان ما در اینجا حلقه ساختیم! ولی قبل از اون یک شرط گذاشتیم که با if ساخته میشه:

یعنی نوشتیم اگر ( if ) ما پستی (مطلبی) داشتیم برو به مرحله ی بعد اگر نداشتیم برو تا بعد از شرط یعنی بعد از endif !!

حالا در مرحله ی بعد while یک حلقه ایجاد میکنه که تا زمانی که پست داریم یعنی have_posts برقرار است این حلقه تا endwhile میره سر راه the_post رو فراخوانی میکنه و باز برمیگرده!

یادتون هست که گفته بودم هر چیزیو که باز میکنیم به ترتیب میبندیم؟

دلیل اینکه while قبل از if بسته شد هم از اون قانون نشأت میگیره!

خوب میریم و قبل از endwhile تابع the_title رو فراخوانی میکنیم تا مثل درس قبلی که عنوان وبلاگ رو فراخوانی کردیم اینبار عنوان پست یا پست هامون رو فراخوانی کنیم تا داشته باشیم:

<?PHP if(have_posts()): while(have_posts()):the_post();?>

<?PHP the_title() ?>

<?PHP endwhile; ?>

<?PHP endif ?>

کار خودمون رو ذخیره میکنیم و میریم در داشبورد یا همون پیشخوان خودمون تا چند پست امتحانی بدیم!

حتما میدونین که محل پست کردن مطالب جدید در این آدرس است:

http://localhost/wordpress/wp-admin/post-new.php

بعد از اینکه دو،سه تا پست دادیم میریم ببینیم سایتمون در چه وضعیتی است!

در این عکس صفحه ی ما تا اینجای کار رو میبینید به همراه تابع هایی که در کنار هر کدوم از اثرات خودشون با رنگ قرمز مشخص شده اند!

و میبینیم که عنوان پست های ما پشت سر هم و بیریخت و… در کنار هم توسط the_title فراخوانی شده اند!

خوب اگه ولگرد وب (وب گرد) باشید مثل من! حتما در وبلاگ های مختلف دیدین که با کلیک روی هر عنوان مطلب میتونین به صفحه ی اصلی اون پست برین و در واقع هر عنوان یک لینک به همون مطلبه!

حالا ما همونطور که عنوان سایت رو تبدیل به لینک کردیم این کارو با عنوان مطلب هم میکنیم:

<a href=”#”> <?PHP the_title() ?> </a>

با این کار عنوان هامون تبدیل به لینک هایی شدن که همه سر به یک بیابان میگذارند! و آن بیابان # است!

میتونین با ذخیره کردن صفحه و دیدن صفحه سایت این نکته رو تست کنین.

میبینیم که همه ی عنوان ها تبدیل به لینک های به درد نخوری تبدیل شدن که هیچ غ.. نمیکنن!

اما برای اینکه یه غ… بکنن و لینکشون تبدیل به آدرس اون پست بشه از تابع the_permalink استفاده ، و اون رو جایگزین # میکنیم.

این تابع چون تابع php است میدونیم که چه کنیم:

<a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a>

حله؟

حالا لطفا پاشین یک عدد سیب میل بفرمایین تا چشماتون هم یه استراحتی بکنه و یه ویتامینی چیزی هم برسه به بدن مبارک! البته من سیب ندارم پرتقال میخورم! اینم قبوله!

نوش جان!

حالالینکهامون درست شدن! میدونین که تا اینجا چی شد؟!

حلقه while به تعداد پست هایی که داریم میره و خط زیرش رو تکرار میکنه و یک کار رو با همه ی اونها انجام میده! یعنی عنوان پست رو تبدیل به لینک همون پست میکنه و میره سراغ پست بعدی!

حالا با این شکل ناجور چه کنیم؟!

یادتون هست که گفته بودم header چیست و تگ مربوط به اون در xhtml چیه؟

این عنوان ها هم header هستند دیگر!؟

خوب خط کدی که نوشتیم رو بین تگ h میگذاریم تا ابهت یک عنوان رو داشته باشه! اما این بزرگی به عظمت نام و عنوان سایت ما نیست!! پس به جای h1 از h2 که کمی کوچکتر است استفاده میکنیم! سپس save و refresh!!

دیدین چی شد؟

<h2> <a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a> </h2>

خوب منم دیدم! تازه داریم یه کارایی میکنیم!

در درس بعدی کار قشنگی میکنیم که اونم نشون دادن متن پست های قشنگون است!!

برای این درس فکر میکنم بس باشد.

موفق باشین

مواظبت نمایید!

بابای…

[shazo]

سلام مرسی ادمه بدین.. تاپیک مفیدی به نظر میاد

[Cpanelcenter]

سلام مرسی ادمه بدین.. تاپیک مفیدی به نظر میاد

با سلام خدمت شما دوست عزیز ممنون از شما بله 100% ادامه خواهد داشت این آموزش

[Cpanelcenter]

جلس هفتم :

سلام

یک مرور کوچیک میکنیم ببینیم تا حالا چی یاد گرفتیم

اول فهمیدیم وردپرس اصلا چی هست و چه میکند!

بعد مواد لازم رو تهیه کردیم و شروع کردیم به نصب وردپرس روی کامپیوتر شخصی برای تست سریع برنامه و قالب ها!

در درس شماره ۱ فهمیدیم تگ ها و قانون مهم اونها چیه و همچنین قالب وردپس از چی تشکیل شده!

درس شماره ۲ که خیلی هم ساده بود یک نمای کلی از یک قالب معمولی وردپرس به ما نشون داد.

در درس شماره ۳ یک قالب جدید با نام amoozesh ساختیم و فایل های index.php و style.css رو ساختیم.

درد درس شماره ۴ تونستیم نام وبلاگ رو در بالای صفحه بارگذاری کنیم. یعنی شروع ساخت header

درس ۴ باز هم ادامه پیدا کرد و توضیحات سایت هم در زیر اسمش اومد تا ساخت header به پایان برسه.

در درس ۵ یک کار مهم رو شروع کردیم و یک حلقه ساختیم که لیست مطالب رو فراخوانی میکرد.

و حالا میخواهیم درس مهم شماره ۵ رو ادامه بدیم:

مثل همیشه برنامه ها و فولدر های مورد نیازمون رو باز میکنیم.

در درس قبل به اینجا رسیدیم که وبلاگمون دارای اسم، توضیحات و لیست مطالب هست.

خوب میدونیم که مطالب ما الان دیده نمیشن

خوب برای اینکار باید در زیرعنوان نوشته در فایل index که در جلسه قبل با این کد:

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>

نوشتیم کد زیر رو اضافه کنیم:

<?PHP the_content();?>

به همین راحتی content یا محتوای پست رو فراخوانی میکنیم، کار رو ذخیره کرده و میریم سایتمون رو ببینیم!

به این ترتیب متن نوشته ها هم در صفحه ظاهر میشه و صفحه ما شامل: عنوان سایت،توضیحات سایت،عنوان پست ها به همراه متن اونهاست!

ما در حال حاضر یک سایت نیمه کامل و البته بسیار بد شکل و قیافه داریم که اصلا ترس نداره!

بعدا با استایل کردن میتونیم بسیار زیبا و شکیلش کنیم.(با کمک فایل style.css )

میبینیم که یک خط کوتاه کد php که نوشتیم چه میکنههههه!!!

احتمالا میدونین که اگه خودتون میخواستین با html این مطالبی که نوشتین رو بعد از وقت گذاشتن بسیار زیاد بنویسین احتمالا از نوشتن پشیمون میشدین!

خوب بریم سر تمیز کاری!

یادتون میاد که در درس header کل کدهای مربوط به قسمت بالایی صفحه رو بین تگی نامرئی(div) با شناسه ی header گذاشتیم و در پایین اون یک تگ نامرئی دیگه ساختیم با نام content که کل محتوای صفحه رو در بر میگیره! حالا ما درمحدوده ی content قرار داریم و میخواهیم که محتوای عنوان نوشته ها و محتوای اونها رو از بقیه قسمت های صفحه متمایز کنیم و نامهایی مناسب براشون انتخاب کنیم.

برای اینکار پیشنهاد من این است که یک نام مناسب برای عنوان هر پست و همچنین یک نام برای متن پستها انتخاب کنیم!

برای اینکار ابتدا یک تگ div برای عنوان پست به این صورت:

<div class=”posttitle”>

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>

</div>

و یک تگ هم برای محتوا به این صورت:

<div class=”entry”>

<?PHP the_content();?>

</div>

میسازیم، میدونیم که این دو تگ(یعنی posttitle و entry ) با هم تشکیل گروه بزرگتری رو میدن که همان پستهای ماست پس هر دوی تگ ها رو با نام post به هم مربوط میکنیم:

<div class=”post”>

<?PHP if(have_posts()): while(have_posts()):the_post();?>

<div class=”posttitle”>

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>
</div>

<div class=”entry”>

<?PHP the_content();?>

</div>
</div>

احتمالا این سوال پیش اومده که چرا به جای id یه تگ ها class دادم!!؟

اصلا فرقشون چیه؟

جواب اینه که فرق زیادی ندارن فقط موضوع مورد توجه اینه که class در صفحه n بار تکرار میشه اما id یگانه است!

در واقع مثل اسم عام و اسم خاص میمونه! ما فقط یک برج ایفل داریم اما n تا برج داریم!! اوکی شد؟!

اوکی…

دیگه چیز خاصی برای این درس نمیمونه جز اینکه بگم حتمن حتمن حتمن گوگل کروم رو دانلود کنید!

کاری ندارم که مرورگر خوبی هست یا نه اما برای درک اینکه ما داریم چیکار میکنیم بسیار زیاد کمکمون میکنه!

هرچند یک افزونه برای فایرفاکسی ها هم بود(اسمش رو یادم نیست اما یک bug داشت و عکسش هم یه سوسک بود ) که کاری که من میخوام توضیح بدم رو انجام میداد اما من کروم رو برای اینکار پیشنهاد میکنم!

با این کروم عزیز بعدها خیلی کار داریم چون میدونم خیلی ها مثل من سرعت بالایی دارن!! گفتم زودتر بگم که شروع به دانلود کنید!!

در ضمن اگه ایرادی داشتم گوشزد کنید لطفن! مرسی…

فعلا بابای بای بای بابای بای

[Cpanelcenter]

جلس هشتم :

سلام

شما ممکنه اسن صفحه رو سیو کنید یا به هر صورت بخوایین offline بخونید این درس رو پس قبل از دیسکانکت شدن این فایل رو دانلود کنید که باهاش کار داریم:

post-meta-data

ما ساخت هدر رو تموم کردیم و رسیدیم به عنوان و محتوای پست!

امروز میخواهیم گزینه های مربوط به هر پست مثل دکمه ی نظر خواهی، تاریخ، موضوع پست و … رو در یر هر پست بیاریم

به همه ی اینها معمولا postmeta یا post meta data میگن.

میشه تقریبا “اطلاعات مربوط به پست” ترجمه اش کرد!

اون فایل که دانلود کردین رو تمامن کپی کنید و زیر the_content قرار بدین.

باید حداقل ۷۰ ، ۸۰ درصدش رو بفهمین ، به هر حال کمی توضیح میدم ولی قبلش یک چیزی در مورد php:

ما در زبان php یک تابع داریم (که در php هست!یعنی ما نمیسازیمش!) به نام echo که کارش اینه که متنی که جلوش میزاریم رو عینن و دقیقا و کاملا و… به صورت خروجی میده، مثلن:

<?PHP echo(‘salam aleykom va rahmatollah!!!’) ?>

خوب فکر نمیکنم php چیزی که ما نوشتیم رو بفهمه!!یعنی مهم نیست ما جلوی echo چیز معنی داری بنویسیم یا نه اون کار خودش رو میکنه!

خروجی:

 salam aleykom va rahmatollah!!!

اوکی؟!

خوب حالا ما در وردپرس تابعی داریم به این صورت: e_

تا اینجا بدونین که این تابع همین کار رو انجام میده! یعنی چیزی که جلوش مینویسیم رو عینن خروجی میده!

یعنی اینکه ما مثل آدم میتونیم بنویسیم:

 Field under:

به جای اینکه اون رو به صورت یک تابع php بنویسیم البته بعدن میفهمیم چرا این کار رو کردیم!

کد زیر هم در کنار کلمه Field under همون دو نقطه ی خودمونه! ( : ) اما اگه ما : بزاریم و از وردپرس فارسی هم استفاده کنیم کلمه به فارسی ترجمه میشه و شکل کار رو خراب میکنه هرچند این قسمت هم دل بخواه است!

:

از این واضح تر بلد نیستم بگم!

حالا مشکل ۲ خطمون در post meta data حل شد! یعنی خط اول و سوم کلمات Field under و By رو به خروجی میدن!

the_catgory تابعی است که موضوع یا موضوعات پست رو به ما میده و (‘ ,’) در جلوش یعنی اگر مثلا مطلب ما به ۳ موضوع مربوط بشه، موضوعات رو با ۲ عدد , از هم جدا میکنه و ما میتونیم مثلا به جاش – بزاریم:

موضوع۱,موضوع۲,موضوع۳

این هم حل شد!

the_author هم تابعی است که نویسنده ی مطلب رو نشون میده، یعنی اگر شما بیش از یک نویسنده در سایت داشته باشید این نشون میده چیو کی نوشته!

comments_popup_link هم از اسمش معلومه یعنی لینکی رو میده که کاربران با کلیک بر روی اون میتونن نظر خودشون رو در رابطه با مطلب بنویسن!

از اونجایی که مردان و زنان انگلیسی زبان یک s برای جمع بستن دارن!! برای همین وقتی ۱ نظر داده شده باید نوشته بشه ۱comment برای همین no comments و ۱comment و n comment رو به صورتی که میبینید از هم جدا کردن تا در هر صورتی که هست درست نمایش داده بشه! در ضمن اون % تعداد نظرات داده شده رو نشون میده،(البته نیازی به حفظ کردن نیست در این قسمت،مهم اینه که بفهمیم چه کردیم!)

مورد دیگه در مورد pop up!

pop up همون صفحه ایست که وقتی میریم توی سایت مزخرف(نمیدونم املاش چه جوریه!) میبینیم که یک صفحه دیگه هم باز میشه از اون مزخرفتر! که معمولا تبلیغاتیه! البته قبلا خیلی بیشتر بود این مسائل اما الان با pop up blocker ها جلوی این صفحه ها توسط مرورگر های جدید گرفته میشه!

به هر حال همیشه اینطور نیست و pop up کاربرد هم داره! مثلا اگه ما popup comment رو در قسمت مدیریت فعال کنیم بازدید کننده های سایت با کلیک بر روی این لینک یک صفحه جدید(به صورت popUp) میبینن که میتونن نظرشون رو بدن و اگه غیر فعال باشه به صفحه ی اصلی مطلب میرن که زیرش هم میتونن نظر بدن!

edit_post_link هم دکمه ی edit رو میزاره برای کسی که مطلب رو نوشته و یا مدیر کل سایت که اگه خواستن متن رو تغیر بدن (زیاد مهم نیست البته!) آرگومان اول هم که edit باشه کلمه ای است که این لینک نشون میده و میتونه هر چیزی باشه! مثلا tashih یا هر چیزی که دوست دارین/داریم/دارند/داشتیم و … آرگومان دوم هم نوشته یا علامتی است که کلمه ی اول (در اینجا edit) رو از نوشته های قبل جدا میکنه.یعنی قبل کلمه edit میاد و آرگومان سوم بعد از کلمه edit میاد، به کد زیر و خروجی اون توجه کنید لطفن:

کد:

<?php edit_post_link(‘Tashih’, ‘*’, ‘#’); ?>

خروجی:

*Tashih#

حالا میل خودتونه که میخواهید چه کنید!

کارمون رو ذخیره میکنیم و میریم ببینیم سایت در چه وضعیتی به سر میبره!

زیر پست من به صورت زیر شده:

Filed under: دسته‌بندی نشده با admin

No Comments » | Edit

البته من لینک هارو غیر فعال کردم ! شما با کلیک بر روی موضوع باید به صفحه ای ارجاع داده بشین که تمام مطالب با اون موضوع رو نشون میده و با کلیک بر روی comments به صفحه ای که فقط در اون یک مطلب وجود داره و اون هم مطلبی است که در بالای این post meta وجود داره!

در مورد تگ <P> هم بگم که از کلمه paragraph به معنی پاراگراف خودمون یا همون بند هست،یعنی بینی این تگ هر چه باشد در یک پاراگراف قرار میگیره.

کلاس هم که در درس قبل گفتیم چیه.یعنی گفتم چیه!

امروز کار خاصی نکردیم!

فقط یه چیز دیگه هم هست! مثلا ما میخواهیم یک چیزی رو کم کنیم از این کد یا یه چیزی اضافه کنیم!

مانعی نداره اما حواستون باشه چیکار میکنید!

مثلا من میخوام بعد از اینکه نوشته شد : by admin تاریخ پست هم اضافه کنم

برای اینکار از تابع the_time استفاده میکنم!

به همین راحتی که قبل از </br > کد زیر رو میزارم:

<?php _e(‘on’);?><?php the_time(‘F jS, Y’);?>

بعدا بهتون میگم به چه راحتی میشه کد ها و توابع وردپرس رو یادگرفت و یا حتی یاد نگرفت اما استفاده کرد!

اگه قول بدین تنبل نمیشید درس تمومه!

فقط یه مطلب دیگه!

اگه در مورد کدهای مخفی html مثل همون دو نقطه و غیره مرجعی خواستین به لینک زیر سری بزنید:

html-character-entities-cheat

کاراکتر های مخفی در فرمت png

کاراکتر های مخفی فرمت pdf

اگه نفهمیدین چیزی رو حتما دوباره بخونین چون باید میفهمیدین! یعنی حواستون پرت بوده است!!

سو…

همین دیگه

از خط عابر عبور کنید!

بابای

[Cpanelcenter]

سلام مرسی ادمه بدین.. تاپیک مفیدی به نظر میاد

با سلام خدمت شما این درس ادمه خواهد داشت و روزانه قرار خواهید گرفت در سایت

[ehsan_296]

چرا بن شد ؟ خوب داشت پیش می رفت که

[SAJJADSAA]

اگه یک نگاه کلی به کل کارهایی که انجام دادیم بندازیم میفهمیم که یک if داریم به معنی: “اگر برقرار باشد” منظورم خط زیر است:

<?PHP if(have_posts()): while(have_posts()):the_post();?>

که اگر پست داشته باشیم کد زیرش رو میخونه اما اگر نداشته باشیم چی!؟
یعنی مثلا ما هیچ پستی ننوشتیم یا در اون زمینه ای که بازدید کننده دنبالش میگرده ننوشتیم!

خوب برای فهماندن جمله ی: “اگر شرط برقرار نبود” به php کد زیر رو بلافاصله بعد از endwhile مینویسیم:

<?php else : ?>

<div class=”post”>

<h2><?php _e(‘Not Found’); ?></h2>

</div>

باید فهمیده باشین چی شد

ما در واقع یک صفحه ی خطا ساختیم که اگر پست مورد نظر پیدا نشد نوشته ی Not Found به معنای “پیدا نشد” نمایش داده میشه و همونطور که قبلا هم گفتم میتونیم هرچیزی جایگزین این جمله بکنیم!

مثلا من میرم به آدرس زیر و با پیغام خطا مواجه میشم:

http://localhost/wordpress/?cat=789

چون من در دسته بندی هام مثلا ۱۰ تا موضوع دارم نه ۷۸۹ تا! و چون جایی رفتم که وجود نداره با این پیغام که “پیدا نشد” مواجه میشم! این رو هم اضافه کنم که اگه این کد رو نمینوشتیم اتفاقی نمی افتاد فقط Not Found نمایش داده نمیشد! همین!

پس فهمیدیم که while با endwhile بسته شد و if با else که عکس اون عمل میکنه ادامه یافت!:

توضیح:قرمز ها تابع، و همرنگ ها مربوط به همند.

حالا در مورد پست ها!

وقتی نگاهی به source سایتمون بکنیم میفهمیم که تمام پستها با یک کلاس (post) شناخته شده اند!

اما هر پست برای خودش پستیه!! و یک آی دی یا شناسه میخواد که اون رو از بقیه پست ها متمایز کنه!

برای اینکه به پست هامون یک آی دی مناسب بدیم به صورت زیردر کنار کلاس post :

id=”post-<?php the_ID(); ?>”

یک خط کد مینویسیم، تابع the_ID تابعی است که کارش اینه که به هر مطلب یک شماره ی منحصر به خودش رو میده

حالا بعد از ذخیره کار میریم و با گوگل کروم که گفتم دانلود کنید و یا با فایرفاکس و افزونه مورد نظر ما (که اسمش رو یادم نبود و الان هست!) یعنی افزونه ی Firebug سایت رو باز میکنیم:

در کروم با کلیک راست روی قسمتی از صفحه (مثلا هدر) و کلیک بر روی آخرین گزینه (Inspect element) صفحه ای باز میشه که سورس رو بسیار واضح و عالی مرتب کرده و بر روی هر قسمت کد که بریم اون قسمت با رنگ زرد در صفحه مشخص میشه و ما می فهمیم هر کد مربوط به کدام قسمت است!

مثل عکس میبینیم که به هر پست یک آی دی منحصر به خودش داده شده که اون رو از بقیه جدا میکنه!

عکس زیر رو باز کنید (به علت حجم نسبتا زیاد باید روی عکس کلیک کنید و ذغالی ها هم صبور باشید لطفن!!)

در فایر فاکس هم Firebug دقیقن (شایدم تقریبن) همین کار رو انجام میده که میتونین ازش استفاده کنید.

اگه نمیتونین اعداد رو ببینین یا ساختار شکل من با شما فرق داره میتونین عکس زیر رو ببینین و اشکالات احتمالی رو رفع کنین!

تصویر کدهای نوشته شده تا امروز

این هم از این!

حالا برین به صفحه سایت و روی یکی از عناوین پست ها موس رو نگه دارین!

میبینین که چیزی نمی نویسه، برای اینکه مثلا همون عنوان رو هم بنویسه میتونیم از title استفاده کنیم که دقیقا مثل href برای تگ a ، عنوان یا title هم یکی از ویژگی هاست که میشه به این تگ نسبت داد،پس کد عنوان ما به این صورت میشه:

<a href=” <?PHP the_permalink() ?>” title=”<?PHP the_title() ?>”>

<?PHP the_title() ?>

</a>

من title رو با استفاده از تابع ()the_title فراخوانی کردم، با ذخیره و refresh کردن میفهمیم که چه تغییری پیش اومد.

حالا اگه با inspect element یا حتی دیدن source سایت قسمت عنوان یکی از پست ها رو پیدا کنیم میبینیم که title هم اضافه شده بهشون!

اینکار شاید برای ما و حتی بازدید کننده ها سودی نداشته باشه اما برای روبوت ها ی سایتهای مختلف که سایت مارو اسکن میکنن میتونه مفید باشه! که بفهمن title ما چیه و از این حرفا!

میدونیم که در ورد پرس مثل بقیه سرویسهای وبلاگ یک حد اکثری برای نوشته ها هست یعنی مثلا در وبلاگ من بیشترین تعداد مطالب ۵ عدد است! که البته از قسمت مدیریت میشه اون رو تغییر داد!

حالا اگه ما تعداد مطالبمون زیادتر باشه چی؟

حتما به دکمه ای نیاز داریم که مارو به صفحات دیگه ببره یعنی مثلا صفحاتی که هر کدوم ۵ پست دارن!

در درس بعدی یاد میگیریم دو کلید “بعدی” و “قبلی” در انتهای وبلاگ قرار بدیم.

فعلن بابای
منبع : آموزش طراحی سایت | TeneT

[SAJJADSAA]

تمام مواد لازم رو باز میکنیم و میریم به index.php و شروع میکنیم به کار تا امروز پرونده ی درس ۵ رو ببندیم تا به ن و ه ی نرسیده!!!

گفتیم که میخواهیم یک “قبلی” و یک “بعدی” که به صفحات قبلی و بعدی میرن لینک بدیم!

این گزینه ها زمانی به کار ما میان که ما پستی نوشته باشیم و حتی بیشتر از اون حدی که نوشتیم هم نوشته باشیم! بنابراین کدی که میخواهیم بنویسیم زمانی است که شرط if برقرار باشه! یعنی قبل از else که خلاف اونه و بعد از endwhile کدمون رو مینویسیم.

<div class=”navigation”>

<?PHP posts_nav_link(); ?>

</div>

برای این هدایت کننده (navigator) هم یک div تگ ساختیم که بعدا بتونیم کارایی که میخواهیم رو انجام بدیم و در ضمن جداش کرده باشیم از بقیه قسمت ها… این نکته هم میدونیم که میتونیم حد اکثر تعداد پست های هر صفحه رو از Options > Reading :

http://localhost/wordpress/wp-admin/options-reading.php

عوض کنیم و کمترش کنیم تا بتونیم نتیجه کاری که کردیم رو ببینیم.من این مقدار رو ۲ کردم!

ذخیره کنیم و ببینیم چه کرده ایم!

میبینید که در زیر صفحه یک جمله ی Next Page اومده که با کلیک کردن روش میریم به صفحه بعدی…

علامت « هم که میبینید یکی از اون کدهای مخفی html است که در درس قبلی گفتیم و پیش فرض تابع posts_nav_link است.

البته این تابع هم انعطاف پذیری داره و میتونیم با ۳ آرگومان تغییرش بدیم:

<?php posts_nav_link(’in between’,’before’,’after’); ?>

اگه تعداد صفحات ما حداقل ۳ صفحه باشه و ما بریم به صفحه ای به غیر از اولی و آخری هم یک “صفحه قبی” داریم و هم یک “صفحه بعدی” که بین این دو اولین آرگومان این تابع است! مثلا من میخوام بین این دو نوشته ### باشه!!

آرگومان بعدی برای جایگزین کردن نوشته ی Previous Page» است و دومی برای جایگزینی «Next Page :

<?php posts_nav_link(’###’,’ghabli’,’badi’); ?>

حله؟!

البته من اینکار رو برای واضحتر کردن این قضیه کردم و نیازی نیست انقدر بیریختش کنید

امروز قسمت Content هم تموم شد یعنی ما تا امروز Header و Content سایت رو ساختیم و باز هم یعنی که نصف راهو رفتیم!

میمونه Sidebar یا کناره ی سایت و Footer که پایین سایتمون رو در بر میگیره!

یک نگاه کلی به توابع مهمی که تا حالا یاد گرفتیم و به کار بردیم در این عکس بندازیم:

درس سبکی بود نه؟

اشکال نداره! سنگینم میشه!

بابای فعلا…
منبع : آموزش طراحی قالب وردپرس #۵ث(هدایتگر صفحه) | TeneT