دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۳(تقسیم بندی فایلها۲)

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

امروز میخواهیم به ساخت فایلهای مهم دیگه ای ادامه بدیم که البته روند کار بسیار آسان است.
ما وقتی روی لینکهای آرشیو سایت کلیک میکنیم به صفحه ای میریم با نام archive که میتونه با index متفاوت باشه (و معمولا هم هست!)
برای اینکه ما archive رو متفاوت از index داشته باشیم:

  • یک فایل archive.php میسازیم/
  • تمام محتوای index.php رو در archive.php کپی میکنیم/
  • فایل رو ذخیره میکنیم/
  • the_content رو پاک میکنیم و به جای اون مینویسیم the_excerpt /

()the_excerpt تابعی است که در صفحه ی آرشیو سایت تمام content یا محتوای مطلب رو نمیاره بلکه یک چکیده مطلب رو نشون میده، و تفاوت عمده ی صفحه ی index با آرشیو هم همینه!
نکته اینکه وقتی مطلب جدیدی در وردپرس مینویسید در زیر محل نوشتن مطلب یک قسمت چکیده هست که همون excerpt ماست.

این کار علاوه بر اینکه از نظر بازدیدکننده مناسب است و خواننده میتونه یک نگاه اجمالی به آرشیو و نوشته ها بندازه از نظر موتورهای جستجو هم مناسبه و به بالا رفتن رنک ( امتیاز سایت ) کمک میکند.

خوب این از این!

یک صفحه ی دیگه ای که وجود داره صفحه ی موضوعات سایت است!

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

با اینکار اگه ما صفحه ای برای موضوعات نساخته باشیم وردپرس از استایل archive.php استفاده میکنه.

اگه میخواهید که صفحه ی موضوعات متفاوت باشه از صفحه ی آرشیو یک فایل category.php بسازید و مثل قبل تمام محتوای archive.php رو کپی کنید و اگه میخاهید تغییری ایجاد کنید، خوب بکنید!

مورد دیگه جستجو است.

شما اگه الان در سایت ساخته شده ی خودتون کلمه ای رو سرچ کنید وردپرس نوشته هایی که اون کلمه در آنها موجود هست رو به صورت کامل میاره یعنی کل content رو میاره(چون از صفحه ی index.php استفاده میکنه) اگه ما بخواهیم که اینطور نباشه و نوشته های جمع و جور تری داشته باشیم باید کارهای زیر رو انجام بدیم:

  • تمام محتوای archive.php رو در فایلی با نام search.php کپی میکنیم/
  • فایل رو ذخیره میکنیم!/

حالا میریم سراغ دو فایل دیگه!

فایل page که صفحات وبلاگ یا همون برگه هاست و ما میتونیم صفحات مختلفی بسازیم مثلا صفحه ی ارتباط با من یا درباره ی من! که معمولا مثل وبلاگ نیستند و بدون تغییرند.

و فایل دیگه single.php است که مربوط به زمانی است که شما روی یک مطلب کلیک میکنید و در این صفحه میتونید فقط یک مطلب رو بخونید و در ضمن میتونید نظرتون رو هم اینجا وارد کنید.

این دو فایل رو میسازیم و محتویات فایل index رو در این دو کپی میکنیم و فایلها رو ذخیره میکنیم.

برای متفاوت کردن Page با index وارد page.php میشیم و در زیر تابع the_content کد زیر رو مینویسیم:

<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>

و بعد postmetadata رو هم کامل پاک میکنیم تا در نهایت داشته باشیم:

<div class=”entry”>
<?PHP the_content();?>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>
</div>

در نهایت میریم سراغ navigation و div مربوط به اون رو کامل پاک میکنیم چون نیازی بهش نیست اصلا!!یعنی اصلا وجود خارجی نداره!

link_pages برای زمانیه که صفحه ی ما محتوای بسیار زیادی و بلندی داشته باشه ما برای اینکه یک برگه رو به چند قسمت کوچکتر تقسیم کنیم باید موقع نوشتن صفحه در قسمت html editor یا ویرایش html کد زیر رو وارد کنیم:

<!–nextpage–>

مثلا یک برگه میسازیم به نام about و راجع به خودمون مینویسیم و هر موقع حس کردیم زیادی نوشتیم! به ادیتور html میریم و این کد را وارد میکنیم، به همین راحتی!

nextpage

بعد از اینکه page.php رو سیو کردیم میریم سراغ single.php که قبلا اشاره کردم چه موقعی استفاده میشه.

دقیقا مثل کاری که با page.php کردیم میریم و زیر the_content کد زیر رو وارد میکنیم:

<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

شاید نمیدونستید اما حتی پستهای وبلاگ رو هم مثل برگه ها میتوان به قسمت های کوچکتری تقسیم کرد! و این کد برای این نوشته شد!

کار دیگه اینه که لینک نظر دهی رو باید پاک کنیم چون میخواهیم در زیر پست قسمت comment یا نظردهی رو قرار بدیم و نیازی به لینک نیست دیگر!

میریم به postmetadata و کد زیر رو پاک میکنیم:

<br /><?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?>

br رو هم پاک کردیم چون یک خط خالی ایجاد میکنه برای همه ی بیننده ها به جز نویسنده که edit براش نمایش داده میشه! پس کار خوبی نیست وجود داشتنش!!

وقتی خواننده وارد یک single page میشه و یک مطلب رو میخونه دیگه لینک به صفحات مختلف معنا نداره و باید لینکی به نوشته ی قبلی و نوشته ی بعدی داده بشه پس میریم به navigation و کد زیر رو جای posts_nav_link مینویسیم:

<?PHP posts_nav_link(); ?>

<?php previous_post_link ( ‘ &laquo; %link ‘ ) ?> <? php next_post_link ( ‘ %link &raquo ; ‘ ) ?>

خط اولی رو پاک کردیم و دومی رو نوشتیم جاش!

معلوم هم هست که چه کردیم! اون کدهای عجیب غریب هم که قبلا گفتم کدهای مخفی html هستن.

ذخیره کنین فایل رو و روی عنوان یکی از نوشته های سایت کلیک کنید تا تغییرات رو ببینید.

سبز باشید!

بای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۲(تقسیم بندی فایلها۱)

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

اگه theme های مختلف ساخته شده برای وردپرس رو دیده باشین حتما دیدین که از فایل های مختلفی تشکیل شده اند.

header و footer و sidebar و غیره

حسن اینکار اینه که ما مثلا اگه یک زمانی میخواستیم قسمتی از هدر رو تغییر بدیم مجبور نباشیم اینکار رو در Pages و Index و Archive تغییر بدیم، فقط کافیه بریم به Header و اون رو هر کاری خواستیم بکنیم.

بعدا بیشتر توضیح میدم هرچند احتمالا قبلش خودتون میفهمین!

ما امروز بعد با style کاری نداریم، در درسهای قبل هدر،سایدبار و محتوا رو style کردیم و فوتر هم به هر نحوی دوست داریم میتونیم تغییر بدیم.

به پوشه ی amoozesh میریم جایی که فایلهای style.css و index.php و searchform.php قرار دارند.

۱-فایل index رو باز میکنیم.

۲-notepad رو باز میکنیم و تمام header Div و هر چی بالای اون هست رو از index کپی میکنیم (از شروع فایل index  تا قبل ازشروع div مربوط به content)

۳-در یک فایل جدید به اسم header.php چیزهایی که کپی کرده بودیم رو paste میکنیم.

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

حالا باید در index کاری کنیم که به جای کدی که کپی کردیم از کدی استفاده کنه که در فایل header.php قرار داره!

بنا بر این از یک تابع php استفاده میکنیم:

کد هایی که کپی کرده بودیم  رو پاک میکنیم و با کد زیر جایگزین میکنیم:

<?php get_header () ; ?>

این تابع اتوماتیک فایل هدر رو include میکنه یعنی کاری که الان انجام دادیم میتونیم به صورتی که برای searchform نوشتیم هم بنویسیم:

<?php include (TEMPLATEPATH . ‘/header.php’); ?>

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

با سایدبار هم دقیقا باید همین کار رو انجام میدیم.

۱-یک فایل با نام sidebar.php میسازیم و div مربوط به سایدبار (sidebar Div) رو کپی میکنیم به درون sidebar.php و کد زیر رو جایگزینش میکنیم:

<?php get_sidebar(); ?>

همین کار رو هم با فوتر میکنیم(یادتون نره کارهایی که میکنید رو سیو کنید هااا!)

۱- فایلی با نام footer.php میسازیم.

۲- در index قسمت div فوتر رو کپی میکنیم و در footer.php قرار میدیم.

۳- در index.php کد زیر رو جایگزین میکنیم.

<?php get_footer(); ?>

۴- فایل رو ذخیره میکنیم.

امروز فایل index رو ۴ تکه کردیم.

اینکار برای تغییر دادن theme در آینده بسیار کمکمون میکنه.

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

amoozesh (1004 دانلود ها)

لطف کنید اگه اشکالی پیدا کردین بهم بگین، ممنون.

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

۲ یا ۳ جلسه ی دیگه بیشتر نمونده که تموم بشه!

همینطور ۲ یا ۳ روز بیشتر نمونده به امتحانی که من تا حالا یک بار هم درسش رو نخوندم!

فکر کنم باید مشروط شم چون من کلن به این کلمه خیلی علاقه دارم! البته با یک ” ه ” در آخرش!

take care of سلف هاتون!

بابای.