دانلود از ۴shared

نکته: در صورتی که قادر به خواندن نوشته های این فایل نیستید، فونت B Yekan را دانلود کرده و به پوشه ی Fonts ویندوز خود بریزید.

مطالب مرتبط

• چگونه افزونه (پلاگین) های وردپرس را فارسی کنیم؟
• آموزش تصویری نصب وردپرس بروی هاست

Write a quick comment | مشاهده‌ 53 نظر دیگر

برای ادامه درس به ادامه مطلب مراجعه کنید…

هماگونه که گفته شده در این درس نیز قصد تقسیم کردن فایل index.php را داریم ولی با پیش زمینه ی درس قبل اینکار بسیار ساده تر خواهد بود.

• مرحله ی اول:

در این مرحله می خواهیم که صفحه ای برای بخش آرشیو بسازیم. پس برای اینکار مراحل زیر را انجام دهید.

» یک فایل بنام  archive.php بسازید
» تمامی کدهای موجود در فایل index.php را کپی کرده و داخل فایل archive.php بچسبانید.
» در داخل فایل archive.php تابع the_content را به the_excerpt تغییر دهید.
» حال دوباره فایل archive.php را save کنید.

همانطور که از نام فایل archive.php مشخص است این فایل برای نحوه ی نشان دادن صفحه ی آرشیو وبلاگ بکار می رود. و البته ما در اینجا این صفحه را دقیقاً مانند صفحه ی اصلی سایت طراحی کردیم بغیر از یک تغییر کوچک که در آن بوجود آوردیم. حال برای فهم بیشتر بروی یکی از آرشیو های قدیمی وبلاگ خود کلیک کنید تا تغییرات را متوجه شوید.

بله درست است در صفحه ی آرشیو شما تنها خلاصه از هر مطلب را مشاهده می کنید نه کل مطلب را. عبارت the_excerpt بجای کد the_content باعث این عمل می شود.

◊ اما چرا اینکار را انجام دادیم؟
ما این عمل را برای محافظت در برابر جریمه ی گوگل انجام دادیم. چون اگر مطلبی هم در آرشیو و هم در صفحه ی اصلی سایت باشد، گوگل این مطالب را تکراری تلقی می کند و ممکن است که وبلاگ شما را جریمه کند و از رتبه ی وبلاگ شما کاسته شود.

نکته: اگر شما مایلید که صفحه ی دسته های (Category) وبلاگ تان نیز با صفحه ی اصلی سایت شما متفاوت باشد، یک فایل بنام category.php ساخته و آنرا آنطور که مایلید تنظیم کنید.

• مرحله ی دوم:

» یک فایل بنام search.php بسازید.
» هر آنچه که در فایل archive.php وجود دارد را کپی کرده و درون فایل search.php بچسبانید.
» تغییرات را save کنید.

با انجام این عمل تمامی نتایج جستجوی وبلاگ نیز بصورت گلچین نمایش داده خواهید بود.

◊ حال شاید این سوال برای شما پیش آید که اگر فایل search.php یا archive.php وجود نداشت، صفحه ی جستجوی وبلاگ یا بخش آرشیو وبلاگ چگونه نمایش داده می شد؟
باید در جواب گفت که اگر فایلهای search.php یا archive.php وجود نداشته باشند، آنگاه وردپرس بصورت هوشمندانه نحوه ی نمایش تمامی این صفحات را از فایل index.php می گیرد.

• مرحله ی سوم:

» دو فایل با نام های page.php و single.php بسازید.
» تمامی کدهای موجود در فایل index.php را درون فایلهای single.php و page.php کپی کنید. (الان باید فایلهای Page و single مانند هم باشند.)
» تغییرات را در فایل page و single ثبت کرده و فایل index.php و فایل single.php را ببیندید.

• مرحله ی چهارم:

فایل page.php در مورد نحوه ی نمایش برگه های وبلاگ شما وارد عمل می شود. حال برای بهتر شدن آن مراحل زیر را پی بگیرید.

۱- در فایل page.php در زیر کد <?php the_content(); ?> کدهای زیر را تایپ کنید:

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

2- کدهای postmetadata از page.php پاک کنید. چون اطلاعات postmetadata در برگه های وردپرس بی معنی هستند.

۳- کدهای posts_nav_link() یا navigation را نیز در فایل page.php پاک کنید.

◊ چه اتفاقی افتاده است؟
کد خط اول که تایپ کردیم برای نمایش تعداد صفحات یک برگه می باشد.

که ظاهر آن برای مجزا کردن در حالت ویرایش وردپرس به مانند عکس زیر می باشد:

البته این امکان هنگامی استفاده می شود که شما یک برگه خیلی طولانی داشته باشید و بخواهید که مطلب مورد نظر خود را در چندین صفحه نشان دهید.

دومین خط تایپ شده به مدیر وبلاگ یک لینک بنام Edit می دهد تا در صورت تمایل بتوانید با کلیک بروی آن به بخش مدیریت وردپرس رفته و مستقیماً متن مورد نظر خود را ویرایش کند. در حقیقت این دکمه برای سهولت دسترسی به ویرایش برگه ها می باشد.

تغییرات را ثبت کرده و فایل page.php را ببیندید.

• مرحله ی پنجم:

اما تنها یک فایل دیگر مانده و آن هم single.php است. فایل single.php مربوط به نحوه ی نمایش صفحه ی اصلی مطالب است یعنی زمانی که شما بروی لینک ادامه مطلب کلیک می کنید و صفحه ی اصلی مطلب گشوده می شود و در آن صفحه قادر هستید که کامنت نیز بگذارید. (شما الان که در حال خواندن این مطلب هستید دقیقاً درون صفحه ی single.php قرار دارید.)

۱- درون فایل single.php در پایین کد <?php the_content() ?> کد زیر را تایپ کنید:

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

بله ، این کد همان خط از کدهایی برای لینک های صفحات می باشد. این کد نیز دقیقاً برای صفحه بندی پست ها بکار می رود.

۲- در بخش postmetadata، تابع <?php comments_popup_link(); ?> و همچنین تگ <br /> قبل از آن را پاک کنید. ولی کل بخش postmetadata را پاک نکنید. و دلیل پاک شدن تگ br نیز این است که یک فاصله ی اضافی را بوجود می آورد که اضافی است.

دلیل اینکه شما تابع تعداد نظرات را پاک می کنید این است که این تابع در بخش single دیگر کار نمی کند بنابراین استفاده ای نخواهد شد، پس بهتر است که در فایل single.php پاک شود.

۳- بجای کد <?php posts_nav_link(); ?> عبارت زیر جایگزین کنید:

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

در صفحه ی اصلی، صفحه ی آرشیو، صفحه ی دسته ها و صفحه ی جستجو ، شما از تابع posts_nav_link() استفاده می کنید تا لینک های Next page و Previous page را صدا بزنید. اما برای صفحه ی single چون لینک های Next page و Previous page وجود ندارند. شما از تابع های previous_post_link() و next_post_link() استفاده کردید تا لینک پست های بعدی و قبلی را صدا بزنید.

تغییرات را در فایل single.php ثبت کنید و آنها را در مروگر مشاهده کنید.

◊ خلاصه درس:

» شما  ۴ فایل با نام های  archive.php و search.php و page.php و single.php ساختید.
» فایلهای archive.php و search.php دقیقاً یکسان هستند.
» بخش های اضافی را از فایل page.php حذف کردیم.
» بخش های اضافی را از فایل single.php حذف کردیم.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 5)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 12)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 10)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)

Write a quick comment | مشاهده‌ 11 نظر دیگر

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

برای شروع درس به ادامه مطلب مراجعه کنید….

برای شروع کار Xampp, Firefox, index.php, style.css را باز کنید.

• مرحله اول:

۱۰ پیکسل فاصله (padding) از بالا به باکس مخفی footer بدهید. بعد از این همه درس باید اینکار را خودتان بتوانید انجام دهید. بنابراین کد را به شما نمی دهم، خود شما باید اینکار ساده را انجام دهید.

• مرحله دوم:

به تمام تگهای P داخل باکس مخفی footer یک ارتفاع خط (line-height) هجده پیکسلی بدهید. به شما یک کمک می کنم، سلکتور مورد نظر برای تگهای پاراگراف درون div فوتر #footer p{} می باشد. (شما امروز خودتان باید این ارتفاع خط را به این سلکتور بدهید.)

• مرحله سوم:

» یک فایل جدید بنام header.php بسازید. مطمئن شوید که نوع یا پسوند فایل php باشد نه یک فایل Document معمولی.

» درون فایل index.php ، از تگ پایانی باکس مخفی header شروع کنید به انتخاب کردن و تا هر آنچه که در بالای آن قرار دارد را select کنید. بعد از انتخاب کردن تمامی خطوط، آنها را cut کرده و درون فایل header.php بچسبانید یا همان paste کنید.

حال می توانید فایل header.php من را برای فهم بیشتر دانلود کنید.

• مرحله چهارم:

شما باید به فایل Index.php بفهمانید که از این به بعد باید کدهای قبلی (کدهای مربوط به هدر) را از داخل فایل header.php بخواند. برای اینکار خط زیر را در ابتدای فایل index.php در عوض کدهای قبلی بنویسید:

<?php get_header(); ?>

کد بالا یک تابع داخل سیستم وردپرس است که به طور ویژه کدهای داخل فایل header.php را درون فایل index.php می خواند. در حقیقت کد بالا کد طولانی <?php include (TEMPLATEPATH . ‘/header.php’); ?> را برای شما خلاصه می کند.

تغییرات را save کرده و مرورگر خود را refresh کنید. شما نباید هیچ تغییری را مشاهده کنید. اگر پوسته ی شما شکسته به نظر برسد یا ایرادی داشته باشد در هنگام انتقال کدها حتماً شما اشتباهی انجام داده اید.

• مرحله ی پنجم:

» مرحله ی پنجم نیز تقریباً مانند مراحل قبل است، منتها اینبار برای فایل sidebar.php انجام خواهیم داد.
» از شروع باکس مخفی sidebar تا پایان آن باکس، کدها را انتخاب، cut و درون فایل sidebar.php بچسبانید.
» سپس، در داخل فایل index.php بجای کدهای برداشته شده کد <?php get_sidebar(); ?> را تایپ کنید.
» تغییرات را save کرده و مرورگرتان را refresh کنید. دوباره شما نباید تغییری را مشاهده کنید.
» الان فایل sidebar.php من را می توانید برای فهم بیشتر دانلود کنید.

• مرحله ی ششم:

» همین مراحل بالا را برای فایل footer.php نیز انجام دهید.
» در داخل فایل index.php بجای کدهای برداشته شده کد <?php get_footer(); ?> را تایپ کنید.
» فایل footer.php من را می توانید برای فهم بیشتر دانلود کنید.

◊ بررسی کردن مراحل:

» شما ۳ فایل جدید با نام های header.php و sidebar.php و footer.php بوجود آوردید.
» شما با ۳ تابع جدید آشنا شدید. تابع های get_header() و get_sidebar() و get_footer().
» شما در پایان این درس می توانید به فایلهای من نگاهی بیاندازید:  index, style, header, sidebar, footer . تا اگر به ایرادی برخوردید از آنها کمک بگیرید.

درس امروز کوتاه بود، چیزی به پایان دروس نمانده است… صبور باشید…….

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 5)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 15)

Write a quick comment | مشاهده‌ 13 نظر دیگر

فعلاً باید سعی کنیم تا همین سری آموزشی به پایان برسد، برای شروع درس به ادامه مطلب مراجعه کنید…

قبل از اینکه درس را بطور جدی شروع کنم، به این نکته که یکی از دوستان به من اطلاع داد، اشاره می کنم. نکته ی کوچک ولی مهمی که من فراموش کرده بودم به اطلاع شما دوستان برسانم، این است که مدل Encoding فایل های ذخیره شده تان را UTF-8 قرار دهید. از هر ادیتوری که می خواهید استفاده کنید ولی Encoding را utf-8 قرار دهید، اگر تا بحال اینکار را انجام نداده اید، هیچ مشکلی ندارد، ولی از همین الان اینکار را انجام دهید تا در بعدها با مشکل مواجه نشوید. هنگامی که مدل Encoding شما utf-8 باشد، در هنگام فارسی نویسی با هیچ مشکلی مواجه نخواهید شد. خوب شاید به شما کمی به شما استرس وارد کرده ام. هیچ غصه ای نخورید چون اینکار در هر مرحله ای براحتی می تواند انجام شود و مشکلاتی که برای شما بوجود خواهد آمد براحتی قابل تعمیر است، البته اگر همین الان اینکار را انجام دهید، هیچ مشکلی را برای شما بوجود نخواهد آمد چون هیچ متن فارسی درون فایلهایتان قرار ندارد.

خوب برای اینکه کار را برای شما آسان کنم نحوه ی اینکار را به شما در Notepad نشان می دهم. هر یک از فایلهای مورد نظرتان را در Notepad باز کنید. به منوی فایل رفته و بروی Save As کلیک کنید. در صفحه ای که باز شد. در بخش Encoding گزینه ی UTF-8 را انتخاب کنید دقیقاً مانند عکس زیر:

فایل را دقیقاً بروی فایل قبلی ذخیره کنید. این اعمال را بروی تمامی فایلهای داخل پوشه انجام دهید. به همین سادگی….

اما اگر اینکار برایتان کمی سخت بود، یک راه بهتر و آسانتر نیز برایتان سراغ دارم. کار کردن با Notepad ساده ترین راهی است که می توان استفاده کرد، من خودم به شخصه از برنامه ی Notepad++ استفاده می کنم. به شما هم پیشنهاد استفاده از این برنامه را می دهم. حال اگر از این برنامه استفاده می کنید یا خواهید کرد، برای تبدیل Encoding پاراگراف زیر را مطالعه کنید:

روش کار بسیار ساده است، فایل مورد نظر را باز کنید، به تب Format بروید و از آنجا گزینه ی Encode in UTF-8 without BOM را انتخاب کنید. مانند عکس زیر:

حال فایل را Save کنید. به همین راحتی به همین خوشمزگی…

تازه درسمان شروع خواهد شد، امیدوارم که خسته نباشید….

بخش اول- فعال سازی Widget برای سایدبار:

◊ اما شاید برای شما این سوال پیش بیاید که ویجیت چیست؟
در جواب این سوال باید گفت که ویجیت (Widget) همان بخشی از وردپرس است که در فارسی به نام ابزارک معنی شده است. در واقع ابزارکهای وردپرس، لوازمی برای سایدبار می باشند که شما براحتی می توانید آنها را در سایدبار سایت خود به نمایش در آورید. حقیقتاً ابزارک ها کار را برای شما آسان می کنند و به مدیران سایت اجازه می دهند تا بدون داشتن دانش برنامه نویسی وب، بتوانند براحتی عکس ، مطلب ، گجت و … را درون سایدبار وبلاگشان به نمایش در آورند و یا مکان آنها را جابجا کنند. جالب است بدانید که در ورژن های قبلی وردپرس امکان ابزارک به این نوع وجود نداشته است و برای استفاده از قابلیت ابزارک، باید یک پلاگین خاص را نصب می کردیم، اما وردپرس به سرعت پی برد که این بخش یکی از قسمتهای بسیار لازم برای وردپرس می باشد و در بسته های بعدی این قسمت را بطور مستقیم درون وردپرس جای داد.

امیدوارم که توضیحات کوتاه بنده برای شما کافی باشد. اما برای فعال کردن قابلیت ویجیت مراحل زیر را پی بگیرید:

• مرحله ی اول: ساختن  فایل functions.php

یک Notepad جدید باز کنید، که کاملاً خالی باشد، و آن را با نام  functions.php ثبت کنید(البته توجه کنید که Encoding فایل UTF-8 باشد.). هر چیزی که داخل فایل functions.txt وجود دارد را، به درون فایل functions.php کپی کنید و سپس تغییرات مورد نظر را Save کرده و سپس صفحه ی Notepad را ببندید.

الان شما باید چهار فایل را درون فولدر tutorial داشته باشید.

• مرحله ی دوم: ابزارک در سایدبار

کد زیر را مستقیماً بعد از اولین خط تگ <ul> در بخش سایدبار تایپ کنید:

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

این کد را نیز به طور مستقیم قبل از تگ </ul> تایپ کنید:

<?php endif; ?>

حال فایل index.php را save کنید، شما هیچ تغییری را مشاهده نخواهید کرد تا زمانی که در قسمت ابزارک ها از یک ویجیت  استفاده کنید، که در این صورت تغییرات اعمال خواهد شد.

همین تمام شد. باورتان می شد که اینکار تا این حد ساده باشد.

بخش دوم – اضافه کردن فوتر (Footer) :

این بخش از درس نیز بسیار ساده است، شما تنها باید یک div یا باکس مخفی زیر بخش div سایدبار اضافه کنید و داخل این تگ را با چیزهای مثل نوشته ی کپی رایت پر کنید. فکر کنم شما اینکار را بدون هیچگونه دستورالعملی نیز می توانید انجام دهید، اینکار را خود به تنهایی انجام دهید و سپس برگردید و ادامه مطلب را بخوانید، تا متوجه شوید که تا چه میزان کار را درست انجام داده اید:

• مرحله ی اول : اضافه کردن div

کدهای زیر را در زیر div مربوط به Sidebar تایپ کنید:

<div id=”footer”>

</div>

• مرحله ی دوم : اضافه کنید متن فوتر
داخل تگ پاراگراف (<p> و </p>) هر نوشته ای را که مایلید، تایپ کنید. البته معمولاً این نوشته ها شامل کپی رایت می شوند:

<p>

Copyright &#169; 2008 <?php bloginfo(’name’); ?>

</p>

notepad را save کرده و مرورگرتان را Refresh کنید، این هست نتیجه:

حروف &#169; کدهایی هستند که علامت کپی رایت (©) را به شما نشان می دهند. همچنین، بیاد بیاورید که bloginfo() تابعی هست که از آن برای قرار دادن نام عنوان سایت در هدر استفاده کردیم که من دوباره از آنها در فوتر استفاه کردم. همچنین بدانید که کلمه name داخل bloginfo عنوان وبلاگ و همچنین url داخل bloginfo آدرس وبلاگ را صدا می زند.

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

بخش سوم- اعتبار سنجی (Validate) صفحات:

قبل از اینکه به شما CSS و کار با فایل Style.css آموزش دهیم، شما نیاز دارید که بدانید چگونه برای کدهایتان  اعتبار نامه بگیرید.

قبل از این نحوه ی اعتبار سنجی را برای شما توضیح دهیم باید بگویم که برای برنامه نویسی وب یکسری قوانین وجود دارد، حال اگر شما از قوانین تبعیت کردید، در حقیقت برای صفحات خود گواهی نامه را نیز دریافت خواهید کرد، در غیر اینصورت صفحات شما گواهی ندارد. البته اصلاً نگران نباشید. چون انصافاً رعایت تمامی این قوانین آنچنان آسان نیست و نداشتن گواهی نیز نقص بزرگی به حساب نمی آید. این را نیز بگویم که ظاهر یک سایت هیچ ربطی به گواهی داشتن یا نداشتن ندارد، چه بسا سایتهای بسیار زیبایی که گواهی نداشته و سایتهایی نا زیبایی که گواهی دارند. این را نیز بدانید که بسیاری از سایتهای بزرگ فعلی نیز فاقد این گواهی نامه می باشند.

Validate یا Validating یا Validation به سادگی معنی مطمئن شدن درباره نداشتن ایراد را می دهد.  من به شما دو لینک XHTML Validator و CSS Validator را می دهم، که از این دو لینک قادر به بررسی اعتبار صفحات تان می باشید. لینک  XHTML Validator برای اعتبار سنجی صفحات اصطلاحاً html می باشد و لینک CSS Validator نیز برای اعتبار سنجی کدهای CSS می باشد که البته هنوز در این رابطه چیزی نخوانده اید.

خوب برای اعتبار سنجی روی XHTML Validator کلیک کرده تا صفحه آن باز شود. حال به صفحه ای که طراحی کرده ایم در مرورگر بروید به تب View رفته و سپس Page Source یا Source را انتخاب کنید. پنجره ای برای شما باز می شود. شما باید همه کدها را انتخاب کنید، برای اینکار می توانید به سادگی دکمه ی Ctrl+a را فشار دهید. سپس همه کدها را انتخاب کنید، برای اینکار نیز می توانید به سادگی دکمه های Ctrl+c کمک بگیرید.

به صفحه ی XHTML Validator باز گردید و در داخل بخش Validate by Direct Input تمامی کدها را Paste کنید برای اینکار می توانید از Ctrl+v استفاده کنید. حال بروی دکمه ی Check کلیک کنید.

کدهای شما توسط validator چک خواهد شد، سپس نتیجه برای شما نمایان خواهد گشت. اگر پیغام سبز بود، یعنی شما هیچ ایرادی نداشتید. و اگر قرمز بود، معلوم می شود که نتوانسته اید اعتبار لازم را دریافت کنید. البته validator به شما می گوید که در کجا ها ایراد داشتید، که اینکار شما را در ایراد یابی کدها یاری خواهد کرد.

درس امروز ما که شامل سه بخش بود به پایان رسید، در جلسات بعدی به شما خواهیم گفت که چگونه با CSS کار کنید، مطمئناً نفس در سینه تان حبس شده است، ولی نگران نباشید، خیلی ساده است….

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 12)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 11)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب ماهان برای وردپرس
• چگونه پوسته های وردپرس را فارسی کنیم؟
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)

Write a quick comment | مشاهده‌ 12 نظر دیگر

این درس شامل سه بخش می باشد که در هر بخش یاد خواهید گرفت تا چگونه عناصری را به سایدبار اضافه کنید. برای یادگیری این درس عجله نکنید، بلکه سعی کنید تا با آهسته پیش رفتن، تمامی مطالب را به خوبی فرا گیرید.

برای شروع درس به ادامه مطلب مراجعه کنید….

بخش اول – لیست برگه ها

در این بخش از آموزش، با لیست برگه های (Page-link) موجود در سایدبار آشنا خواهیم شد.

کد زیر را در بالای بلوک دسته ها اضافه کنید:

<?php wp_list_pages(); ?>

تغییرات را ثبت کرده و مرورگرتان را Refresh کنید.

در حالت پیشفرض، در وردپرس شما فقط یک برگه (معمولاً همان برگه ی درباره) وجود دارید. من خودم برگه های کوچک دیگری در زیر مجموعه ی برگه های دیگر اضافه کردم.

به منوی View رفته و Page Source یا Source را بگشایید تا تمام ساختار و همه کدهایی که wp_list_pages() برای شما تولید کرده است را مشاهده کنید. عکس زیر یک مثال است:

◊ توضیح آنچه اتفاق افتاده است:

اول از همه، هرچیزی داخل لیست آیتم (li) قرار گرفته است. دوم، کلمه ی Pages نوشته شده است، سوم، یک لیست غیرسفارسی یا unordered list و یا همان تگ ul، داخل لیست آیتم (li) قرار گرفته است. چهارم، هر لینکی داخلی گروهی از تگ های <li> و </li> قرار گرفته است.

در اسکرین شات بالا، توجه کنید که سایز کلمه ی برگه ها (Pages) در مقایسه با عنوان دسته ها (Categories) کوچکتر است.

◊ چطور سایز برگه ها و دسته ها را متناسب کنیم؟
برای اینکار کد ‘title_li=<h2>Pages</h2>‘ را به wp_list_pages() اضافه می کنیم.

تغییرات را ثبت کرده و مرورگرتان را Refresh کنید تا تغییرات را مشاهده کنید.

بخش دوم – لیست آرشیو و پیوندهای وبلاگ

بخش دوم آموزش امروز مربوط به آوردن بلاگرول و آرشیو وبلاگ می باشد. امیدوارم که بحث قبلی را بخوبی متوجه شده باشید. حال بحث جدید رو آغاز می کنیم.

• مرحله اول:

در بخش اول قصد داریم تا لیست آرشیو را به سایدبار اضافه کنیم، کدهای زیر را در محل سایدبار و زیر لیست دسته ها (Categories) تایپ کنید:

<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>

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

فایل را ثبت و مرورگرتان را refresh کنید، نتیجه اینگونه خواهد بود:

◊ چه اتفاقی افتاده است؟

شما از تابع پی اچ پی wp_get_arhives() همراه با مشخصه ی monthly استفاده کرده اید، تا آرشیو وبلاگتان را بصورت ماهیانه  صدا بزنید.

» <li> - باز کردن لیست آیتم
» <h2> - باز کردن sub-heading
» <?php _e(’Archives’); ?> - کلمه ی Archive را  نشان خواهد داد
» </h2> - بستن sub-heading
» <ul> - بازکردن unordered list زیر sub-heading و داخل لیست آیتم ها
» <?php wp_get_archives(’type=monthly’); ?> - لینک آرشیو وبلاگتان را بصورت ماهیانه صدا می زند، هر لینکی داخل تگ <li> و </li> قرار می گیرد. اگر شما Page Source یا Source صفحه تان را چک کنید، خواهید دید که برای هر لینک تابع wp_get_archives() ، تگ لیست آیتم (li) بطور خودکار بدور آن قرار گرفته است. بسیار شبیه به تابع wp_list_cats()
» </ul> - بستن unordered list که در زیر sub-heading قرار گرفته است
» </li> - بستن لیست آیتم ها

• مرحله ی دوم:
در این مرحله قصد داریم تا لینک بلاگرول و یا همان پیوندها را اضافه کنیم:

کد زیر را در پایین لینک آرشیو تایپ کنید:

<?php get_links_list(); ?>

تغییرات را save ، مرورگر را refresh و نتیجه را مشاهده کنید:

در حالت پیش فرض ، بلاگرول من تفاوتی با مال شما ندارد، برای همین سری به کدهای Source زده تا اوضاع را بهتر بررسی کنیم.

همانگونه که مشاهده می کنید تابع get_links_list() خود به تنهایی تمامی کارها را انجام داده و کدهای مورد نیاز را تولید کرده است، بنابراین نیاز به هیچ دستکاری دیگری نیست. در تصویر بالا تگهای li و ul را با رنگهای قرمز و سبز مشخص کرده ام تا مشاهده کنید که قانون اول نیز به خوبی رعایت شده است. (برای آگاهی از قانون اول به درس اول مراجعه کنید)

بخش دوم – تقویم ، فیلد جستجو و لیست اطلاعات

• مرحله ی اول:
در این مرحله یاد خواهیم گرفت که چگونه فیلد جستجو را به سایدبار اضافه کنیم.

یک Notepad کاملاً خالی باز کنید. این فایل را با نام searchform.php ثبت کنید(در همان فولدری که فایل index.php قرار دارد) اطلاعات درون فایل searchform.txt را در فایل searchform.php  کپی کنید. حالا فایل را save کرده و از آن خارج شوید.

در فایل index.php کدهای زیر را در بالای لیستی که مروبوط به Sidebar می شود، تایپ کنید.

<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

تغییرات را save کرده و مرورگرتان را refersh نمایید. نتیجه باید مانند زیر باشد:

◊ چه اتفاقی افتاده است؟

» <li id=”search”> - یک لیست آیتم با نام آی دی Search شروع می کند. شما به این گزینه id داده اید، بنابراین می توانید بعداً آن را استایل کنید.
» include() - بوسیله ی این کد می توانید کدهای هر فایلی را بدرون فایل مورد نظر فراخوانی کنید. در این مورد، کدهای داخل فایل searchform.php درون فایل مورد نظر(در اینجا index.php)، آورده و خوانده می شود. استفاده از این تابع، برای  مدیریت آسانتر فایلها انجام می گردد.
» TEMPLATEPATH - مکانی که فولدر پوسته ی شما قرار دارد را آدرس می دهد، یعنی wp-content/themes/tutorial
» ‘/searchform.php’ - مکان و نام فایل /searchform.php
شما بوسیله ی آوردن آنها در کنار هم، بین TEMPLATEPATH و ‘/searchform.php‘ ارتباط برقرار می کند، و در انتها دارید:
wp-content/themes/tutorial/searchform.php
» </li> - لیست آیتم را می بندد

• مرحله ی دوم:
در این مرحله یاد خواهیم گرفت که چگونه تقویم را به سایدبارمان اضافه کنیم.

کدهای زیر را در پایین کدهای فیلد جستجو یا بلوک برگه ها تایپ کنید:

<li id=”calendar”><h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li>

تغییرات را ثبت کرده و مرورگرتان را Refresh کنید. نتیجه اینگونه خواهد بود.

◊ چه اتفاقی افتاده است؟

» <li id=”calendar”> - لیست آیتم ها را با id بنام Calendar باز می کند
» <h2> - تگ sub-heading را شروع می کند
» <?php _e(’Calendar’); ?> - کلمه ی Calendar را نمایش می دهد
» </h2> - تگ sub-heading را می بندد
» get_calendar() - تقویم را با استفاده از تابع get_calendar() صدا می زند
» </li> - لیست آیتم را می بندد

خوب عملیتات تقویم نیز بخوبی انجام شد.

• مرحله ی سوم:
و در مرحله ی آخر این درس یاد خواهیم گرفت که چگونه بخش اطلاعات را به سایدبار اضافه کنیم

در این مرحله قصد داریم تا اطلاعات وبلاگ را که شامل عضویت در وبلاگ، ورود به وبلاگ، خروج از وبلاگ، ورود به بخش کنترل پنل و… است را به سایدبار اضافه کنیم.

برای اینکار کدهای زیر را در پایین کد get_links_list() تایپ کنید:

<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

تغییرات را ثبت کنید و نتایج را در مرورگرتان مشاهده نمایید.

(اگر بعنوان مدیر وارد وبلاگ نشده باشید نتایج اینگونه خواهد بود)

(اگر وارده شده باشید. )

◊ چه اتفاقی افتاده است؟

شما کار را با یک لیست آیتم (li) با یک sub-heading یا همان H2 برای Meta شروع کردید. پایین sub-heading ، شما یک  unordered list یا همان تگ ul وارد کرده اید. و برای هر لینکی، شما تگ لیست آیتم (li) را بدور آنها قرار داید.

تابع  wp_register() خودش به تنهایی تگهای <li> و </li> را تولید می کند، وقتی شما داخل وبلاگ نشده باشید، آن لینک Register را برای شما نشان می دهد، وقتی که شما داخل وبلاگ شده باشید، آن به شما لینک Site Admin را نشان خواهد داد، تابع wp_loginout() خودش تگهای لیست آیتم را تولید نمی کند، بنابراین شما بایستی تگهای <li> و </li> را بدور آنها قرار دهید. این کد هنگامیکه داخل سایت نشده باشید، به شما لینک Login را نشان می دهد، و هنگامی که داخل وبلاگ شده باشید، به شما لینک Logout را می دهد. و تابع wp_meta() هیچ کار خاصی نمی کند، این کد یک چیز مخفی در صفحه ی وب و همچنین یک چیز مخفی در Source کد می باشد. الان در مورد wp_meta() فکر نکنید، شما از این تابع به ندرت استفاده خواهید کرد.

حال تقریباً سایدبار شما ساخته شده است، در جلسه ی بعد به شما نحوه ی اضافه کردن قابلیت ابزارک را خواهیم گفت. می دانم که بی صبرانه برای آن منتظرید.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 13)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• قالب ماهان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 11)
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 16)

Write a quick comment | مشاهده‌ 14 نظر دیگر

مطلب امروز خود را با یه عذرخواهی از شما به علت تاخیر در آماده شدن این مطلب آغاز می کنم. در این درس به شما نحوه ی ساخت سایدبار را خواهیم گفت. مطمئن هستم که برای شنیدن این درس بسیار مشتاق بودید، پس امیدوارم که مورد رضایت شما واقع شود.

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

خوب درس را شروع می کنیم، ادامه درس در ادامه مطلب…

قبل از شروع مبحث، شما باید فایلی مانند index.php داشته باشید (بروی index.php کلیک کنید)

فراموش نکنید که برنامه ی Xampp را فعال کنید.

• مرحله اول :

اجازه دهید که یک باکس از نوع class بنام Sidebar را ایجاد کنیم تا بدور هرچیزی که جزو sidebar حساب می شود، قرار بگیرد. کد پایین را زیر باکس container و بالای تگ </body> تایپ کنید:

<div class=”sidebar”>
</div>

• مرحله دوم :

یک لیست unordered (یا غیر سفارشی) داخل باکس جدید Sidebar ایجاد کنید.

» <ul> - کد باز کننده ی لیست unordered

» </ul>- کد بستن لیست unordered

توجه: لیست غیر سفارشی یا همان تگ ul مخفف unordered list می باشد.

• مرحله ی سوم :

یک  لیست آیتم ها (li) را درون unordered list که مخفف آن همان کد ul هست، ایجاد کنید و درون آن یک sub-heading قرار دهید. یعنی:

<li><h2><?php _e(’Categories’); ?></h2>
</li>

توجه کنید که فاصله ای بوسیله ی Tab قبل از تگهای <li> و </li> برای سازماندهی بهتر، اضافه شده است.

» <li> - لیست آیتم را باز می کند
» <h2> - تگ sub-heading را باز می کند
» <?php _e(’Categories’); ?> - کلمه ی Categories را نشان می دهد
» </h2> - تگ sub-heading را می بندد
» </li> - لیست آیتم را می بندد

توجه: لیست آیتم یا همان تگ li مخفف کلمه ی list item می باشد.

شما نیازی ندارید که کد <?php e(’ ‘); ?> را بدور کلمه ی Categories اضافه کنید. ولی اینکار را انجام دهید تا در فارسی سازی این پوسته با مشکل روبرو نشوید.

تغییرات را save کرده و مرورگرتان را refersh کنید. شما بایستی Categories را با ساختار sub-heading شبیه به زیر ببینید:

یک گوی کوچک قبل از sub-heading شما قابل دیدن هست، دلیل آن این است که sub-heading درون یک لیست آیتم ها (li) قرار گرفته. اگر شما ۲ لیست آیتم (li) داخل لیست unordered یا همان تگ (ul) داشته باشید، می بایست ۲ گوی را مشاهده کنید، در حقیقت برای هر آیتم یک نقطه یا گوی خواهیم داشت.

• مرحله چهارم :

کد زیر ار داخل لیست آیتم یا li خودمان اضافه کنید:

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>

◊ معنی این کدها چیست؟

» <ul> - یک لیست غیر سفارشی باز می کند.
» <?php wp_list_cats(); ?> - کدی از php است که وظیفه ی آن صدا زدن دسته های وبلاگ می باشد.
» </ul> - لیست غیر سفارشی را می بندد.

تغییرات را save کرده و مرورگرتان را refresh کنید. حال باید دسته هایتان شبیه به عکس زیر بنظر برسد:

دسته ی پیش فرض شما Uncategorized هست که البته وردپرس فارسی آن را دسته بندی نشده معنی کرده است. اگر مطالبتان را در چندین دسته ی مختلف منتشر نکرده اید، شما در بخش دسته های وبلاگ باید تنها یک لینک به نام دسته بندی نشده داشته باشید.

◊ توضیحات بیشتر:

» sort_column=name - لیست دسته ها را بر اساس الفبا مرتب می کند.
» optioncount=1 - تعداد هر پست را در زیر مجموعه ی هر دسته نشان می دهد. البته اگر مقدار آن را از یک به صفر تغییر دهید دیگر تعداد مطالب درون هر دسته را نخواهید دید.
» hierarchial=0 - دسته ها را داخل زیر مجموعه ی sub-list-items نمی چرخاند.
» & - هرگاه بخواهید یک مشخصه ی دیگر را اضافه کنید، شما باید & را برای مجزا کردن آن از مشخصه های دیگر تایپ کنید. برای مثال شما & را آوردید ، بین sort_column و optioncount تا این دو را از یکدیگر مجزا کنید.

◊ چرا شما تگ های <li> و </li> را بدور <?php wp_list_cats(); ?> قرار ندادید؟

شما برای اینکه لینک دسته ها را صدا بزنید از wp_list_cats() استفاده می کنید. این کد بطور خودکار گروهی از تگ های لیست آیتم یعنی تگ های <li> و </li> را بدور همه ی لینکها اضافه می کند. برای اینکه بیشتر متوجه شوید به تب view رفته و سپس Page Source یا Source را انتخاب کنید. بعد از اینکه پنجره ی Pop up بازشد، اسکرول را به پایین بکشید و کدهای مربوط به لینک دسته ها را مشاهده کنید، خواهید دید که هر لینک دارای یک گروه از تگ های لیست آیتم به دور خودش می باشد.

هنگام کار با Sidebar توجه کنید که unordered list و list items بسیار مهم هستند، بنابراین بیاد بیاورید قانون اول و دوم ما در کد نویسی:

قانون اول: هرچیزی را باز کرده اید را در آخر ببندید.

قانون دوم : تگها نباید بصورت تو در تو در یکدیگر ایجاد شوند.

درسهای بعدی از این سری آموزشی را دنبال کنید……..

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 13)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 12)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 16)
• قالب ماهان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)

Write a quick comment | مشاهده‌ 4 نظر دیگر

مدتی بود که سرگرم کاری بودم، به همین دلیل آماده کردن این آموزش کمی طول کشید، اما مهم این است که این آموزش آماده شد. بنابراین آموزش دهم از این سری آموزشی را با نیرویی مضاعف آغاز می کنیم. آموزش این هفته ی ما در رابطه با قرار دادن لینکهای صحفه ی بعد (Next Page) و صحفه ی قبل (Previous Page) در انتهای صفحه است. این لینکها که حتماً با آنها آشنایی دارید وظیفه ی نشان دادن پستها و یا مطالب قبلی و بعدی را به شما دارند. راستی اگر تا بحال با این سری آموزشی همراه نبوده اید، از اینجا، خواندن این سری آموزشی را پی بگیرید.

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

آموزش این هفته ی ما بسیار کوتاه است و فقط شامل یک مرحله می شود.
در ابتدا همان کارهای همیشگی را انجام دهید: برنامه ی Xampp و فولدر پوسته های وردپرس را بگشایید. مرورگرتان را فعال کرده، و فایل index.php را باز کنید.

● مرحله اول:

کد زیر را بین کدهای  <?php endwhile; ?> و <?php else : ?> اضافه کنید.

<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>

توجه کنید که برای سازماندهی کدها بوسلیه ی دکمه Tab خطها را کمی جلو و عقب کرده ام.

◊ توضیح آنچه انجام شده است:

» <div class=”navigation”> - این تگ باکس مخفی ای را با نام navigation  ایجاد می کند. توجه کنید که ما این تگ را به دور لینک های posts_nav_link() قرار داده ام تا بتوانیم، بعدها به این باکس مخفی ویژگی بدهیم.
» <?php - شروع php
» posts_nav_link() - لینک های بعدی (Next) و قبلی (Previous) را صدا می زند.
» ; - به صدا زدن آنها را پایان می دهد.
» ?> - تمام شدن php
» </div> - بستن باکس مخفی که نام آن navigation هست.

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

تغییرات را ثبت و سپس مرورگرتان را refresh کنید  حال باید لینک های Next یا Previous را مشاهده کنید. بصورت پیشفرض اگر شما بیشتر از ۱۰ پست را به وردپرس تان اضافه نکرده باشید، این گزینه را نخواهید دید. اگر که نمی توانید لینکهای Next و Previous را مشاهده کنید به قسمت مدیریت وردپرس رفته و در بخش نوشتن، مطالبی را اضافه کنید تا تعداد پست هایتان بیشتر از ده عدد شود و یا به بخش تنظیمات رفته، در زیر مجموعه ی تب خواندن، تعداد پست هایتان را از ۱۰ عدد به تعداد دلخواه در بیاورید، تا بتوانید لینک های Next یا Previous را مشاهده کنید. برای مثال از ۱۰ از به ۵ پست برسانید

◊ چگونه posts_nav_link() را  تطبیق دهیم:

در درس postmetadata تابع هایی را به شما معرفی کردیم که در تنظیمات آن سه علامت نقل قول را می توانستیم معین کنیم. در اینجا نیز شما قادرید تا این تنظیمات را در سه نقل قول جا دهید. این تنظیمات برای این است که شما بتوانید بین، قبل و یا بعد از لینک های Next و Previous علامت دلخواهتان را قرار دهید. دستور زیر شما را در فهم یاری می کند.

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

اولین گروه از بخش علامت نقل قول که با رنگ سبز مشخص شده است، برای این منظور به کار می رود تا هر آنچه را که مایل بودید را در بین لینکهای Next و Previous قرار دهید. بوسیله ی دومین گروه از علامت نقل قول که با رنگ آبی مشخص شده است، می توانید هر آنچه را که مایل بودید قبل این لینکها بیاورید. و در آخر سومین گروه از علامت نقل قول که با رنگ سبز مشخص شده است، وظیفه ی این عمل را بر عهده دارد تا هر آنچه را که مایل بودید بعد از این لینکها قرار دهید.
ممکن است که متوجه نشده باشید که منظور من چیست، پس بهتر است تا بعنوان مشق شب تان، با قرار دادن عبارت های گوناگون داخل این سه علامت نقل قول، متوجه شوید که منظور من چیست.

در اینجا یک مثال از تطبیق تابع posts_nav_link() داریم:

بله درس امروز به همین کوتاهی بود. امیدوارم که حداقل به اندازه ی کوچکی اش از آن استفاده کرده باشید.
البته روش آسانتر و بهتری برای ساخت لینک صفحات بعد و قبل هم هست که در درسهای پایانی به شما خواهیم گفت.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)

Write a quick comment

این بار دو جلسه را بصورت یکجا به شما خواهیم گفت. امیدوارم که با اینکار بتوانم رضایت شما عزیزان را جلب کرده باشم. قبل از اینکه درس را به صورت جدی شروع کنم، باز و باز و باز هم این مسئله ی تکراری را می گویم که از ابتدا شروع کنید….. (البته انصافاً این بار خلاصه گفتم)

بعد از گفتن مقدمه باید این نکته را نیز عرض کنم که در ابتدای جلسه، کار با postmetadata را شروع خواهیم کرد و سپس در جلسه ی بعد یا همان بخش دوم که در ادامه ی همین درس خواهیم داشت، به شما Else, Post ID, Link Title را معرفی خواهیم کرد. درس را با نیرویی مضاعف شروع می کنیم….

بعلت طولانی شدن صفحه، برای مطالعه ی درسهای هشتم و نهم به ادامه مطلب مراجعه کنید….

نکته: برای بزرگ دین عکس ها بروی آنها کلیک کنید.

درس هشتم – Postmetadata:

◊ postmetadata چیست؟

سوال بسیار خوبی پرسیدم، در حقیقت postmetadata شامل: تاریخ نوشته، دسته ها، نویسنده، تعداد نظرات و… می شود. در حقیقت هر اطلاعات جانبی که مربوط به یک پست شود را postmetadata گویند. برای اینکه این موضوع را بیشتر متوجه شوید به عکس زیر نگاهی بیندازید:

قبل از اینکه درس را به طور رسمی شروع کنیم، شما همان کارهای قبلی را انجام دهید، یعنی برنامه ی Xampp را اجرا کنید، فولدر پوسته های وردپرس، مرورگر و همچنین فایل index.php را نیز باز کنید.

اجازه بدهید که در ابتدا، آنچه را که در دروس قبل گفته ایم، بررسی کنیم، شما باید تا الان مانند آنچه که در عکس زیر موجود است را در فایل index.php داشته باشید:

● مرحله ی اول:

کدهای موجود در فایل  postmetadata.txt را در زیر کد <?php the_content(); ?> کپی و پیست کنید (توجه: این بار شما می توانید از کپی و پیست استفاده کنید. شما لازم نیست که بطور کامل کدهایی که در این قسمت اضافه کردیم را متوجه بشوید. همین که بدانید هر گروه از کدها چه اعمالی را انجام می دهند، کافی است)

عکس زیر بخشی از کدهای اضافه شده را نشان می دهد.  سعی کنید که کدهایتان را سازماندهی کنید (بوسیله ی دکمه Tab)

حال تغییرات را ثبت کرده و صفحه را refresh کنید.

شما همچنین می توانید به کدهای پنجره ی source از مرورگرتان نگاهی بیاندازید تا کدهای postmetadata را مشاهده کنید و متوجه شوید که اینگونه کدها به چه شکلی ظاهر می شوند. بیاد بیاورد که من به شما نشان دادم که چگونه پنجره ی کدهای Source را بگشایید. برای اینکار به تب view رفته و سپس Page Source یا Source را انتخاب کنید.

◊ توضیحات مربوط به کدهای اضافه شده:

» <p class=”postmetadata”> و </p> - تمامی اطلاعات postmetadata بین تگ های پاراگراف (P) با مقدار class=”postmetadata” قرار می گیرند، زیرا من می خواهم تا postmetadata را از سایر محتوا (Content) یا همان مطالب ورودی مجزا کنم. بدون تگ پاراگراف (P)، اطلاعات postmetadata در هر کجا که محتوا (Content) یا همان مطالب ورودی تان پایان یابد، نشان داده خواهد شد، و همچنین، هیچگونه فاصله ای بین مطالب ورودی (Content) و postmetadata وجود نخواهد داشت.

» <?php _e(’Filed under:’); ?> - عبارت &amp#58 کدی هست که عبارت دو نقطه ( : ) را  صدا می زند و همچنین کد <?php _e(’ ‘); ?> بدور Filed under&#58 قرار می گیرد، البته شما می توانید به سادگی Filed under: را  تایپ کنید، ولی بیاد داشته باشید که می خواهیم زمانی این پوسته را به فارسی ترجمه کنیم و در صورتی که اینکار را انجام نداده باشید، با مشکل روبرو خواهیم شد. در جلسات پایانی که نحوه ی فارسی سازی پوسته را به شما خواهم گفت، کاربرد کد _e(’ ‘) را بهتر متوجه خواهید شد.

» <?php the_category(’, ‘); ?> - عبارت the_category() یک تابع از php می باشد و دسته ها (category) را صدا می زند. دسته هایی که شما مطلب تان را در آنها قرار داده اید. حال که شما  Filed under: و the_category() را با یکدیگر قرار داده اید، خواهید داشت Filed under: Name of category 1, Name of category 2 . علامت کامایی که (،) بین نقل قول the_category(’, ‘) قرار دارد، برای جدا کردن دسته ها بوسیله ی کاما(،) گذاشته شده است، که می توانید آنرا با هر چیز دیگری عوض کنید (کاما در حقیقت بین هر دسته قرار می گیرد تا دسته ها را از یکدیگر جدا کند. اگر متوجه نشده اید، کاما را با / عوض کنید و صفحه را Refresh نمایید تا تغییرات بوجود آمده، باعث فهم شما شود، البته این نکته را باید بگویم که شما باید مطالبتان را در چند دسته یا Category مختلف قرار داده باشید تا بتوانید این تغییرات را مشاهده کنید. اگر باز هم متوجه نشده اید که چه می گویم، این مبحث را بدون تغییر رها کنید و مطمئن باشید که روزی خواهید فهمید)

» <?php _e(’by’); ?> - این عبارت مانند همان کاری هست که برای Filed under: کردیم. اگر شما یک پوسته برای استفاه ی شخصی می سازید، می توانید عبارت _e() را بدور کلمه هایتان قرار ندهید. اما اگر پوسته ای می سازید که برای عموم است، قرار دادن این عبارت بسیار اهمیت دارد. بطور کلی بگویم که هر پوسته ای را چه برای خود و چه برای هر شخص دیگری می سازید، اگر می خواهید که پوسته تان استاندارد و استفاده از آن راحت باشد، از کد _e() حتماً استفاده کنید. در جلسات پایانی اهمیت آنرا بیشتر حس خواهید کرد.

» <?php the_author(); ?> - نیازی به توضیح ندارد، این تابع به سادگی  نام شخصی که این پست و یا مطلب را منتشر کرده است را چاپ می کند.

» <?php comments_popup_link(’No Comments »’, ‘۱ Comment »’, ‘% Comments »’); ?> -
عبارت comments_popup_link() تعداد نظراتی که برای هر پست داده شده است را صدا زده و نمایش می دهد. عبارت No Comments &#187; هنگامی نشان داده می شود که برای مطلب شما هیچ نظری وجود نداشته باشد. عبارت ۱ Comment » هنگامی نمایش داده می شود که برای مطلب شما تنها یک نظر وجود داشته باشد، و در آخر عبارت % Comments &187; هنگامی استفاده می شود که تعداد نظرات شما بیش از یک نظر باشد. برای مثال ۸ Comments » . علامت درصد (%) بجای تعداد نظرات و عبارت &#187 نیز کد شکل » می باشد.

» <?php edit_post_link(’Edit’, ‘ | ‘, ”); ?> - این کد تنها زمانی استفاده خواهد شد که شما بعنوان مدیر وارد وبلاگتان شده باشید. عبارت edit_post_link() به سادگی لینک Edit را برای هر پستی به مدیر وبلاگ نشان می دهد تا اگر مایل بود، قادر باشید که پست مورد نظرش را به آسانی تصحیح کند. عبارت edit_post_link() سه گروه از علامت نقل قول را دارا می باشد. اولین علامت نقل قول برای آن است که کلمه ویرایش پست با چه عنوانی نمایش داده شود. اگر شما برای مثال عبارت Edit Post را بجای کلمه ی Edit بنویسید آنگاه به شما کلمه Edit Post در عوض کلمه ی Edit نمایش داده خواهد شد. دومین گروه از علامت نقل قول ها تنها برای آن می آید که عبارتی را قبل از کلمه ی Edit قرار دهد. در اینجا یک خط عمود (|) که کد آن هم &124 است نمایش داده خواهد شد. سومین گروه از علامت های نقل قول برای این است که شکلی را بعد از کلمه ی Edit قرار دهد و چون درون آن هیچ عبارتی قرار داده نشده است، هیچ شکلی نیز مشاهده نخواهد شد. کاملا می فهمم که در این مورد کمی گیچ شده اید، می توانم بیشتر توضیح بدهم ولی اینکار را انجام نمی دهم و از خود شما می خواهم که با تغییر محتوای داخلی این سه گیومه متوجه شوید که منظور من چیست. فقط تغییرات را بعد از آزمایشات گوناگون به حالتی که الان وجود دارد، برگردانید.

توجه: بعنوان مدیر وبلاگ وارد بخش مدیریت شوید سپس به صفحه ی اصلی سایت برگردید و لینک Edit را مشاهده کنید.

◊ اما یه چیزی را فراموش کرده ایم!!؟

درست حدس زدید، فراموش کردیم که تاریخ نوشته شدن مطلب را اضافه کنیم. این قسمت را من جدا از بخش های دیگر گفتم زیرا بسیار تنوع در نمایش دادن تاریخ متفاوت است. برای مثال به عکسهای زیر توجه کنید:

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

خوب درس این جلسه ی ما به پایان رسید، اما فراموش نکنید که جلسه ی بعد را نیز در ادامه این جلسه بخاطر رضایت شما عزیزان شروع می کنم. بنابراین با ما باز هم همراه باشید…

در بخش دوم از این سری، شما را با Else, Post ID, Link Title آشنا خواهیم کرد.

درس نهم (بخش دوم) – آشنایی با Else, Post ID, Link Title:

این درس Else, Post ID, Link Title را پوشش می دهد، که البته تنظیمات اضافی محسوب می شوند و اضافه کردن آنها اختیاری است، اما شما این تنظیمات را در هر پوسته ای خواهید یافت، زیرا شما نمی دانید، اشخاص برای چه اهدافی از پوسته ی شما استفاده می کنند. این بار به سرعت به سراغ مراحل می رویم و در طول آموزش، توضیحات لازمه را می دهیم.

● مرحله ی اول:

کدهای پایین را در زیر کد <?php endwhile; ?> تایپ کنید:

<?php else : ?>

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>

باید تصویری شبیه به زیر داشته باشید (توجه کنید برای سازماندهی کدها از tab استفاده کنید):

تغییرات را ثبت کنید و صفحه را نیز Refresh نمایید، اما شما نباید هیچ تغییری را مشاهده کنید. حال به توضیح آنچه که تایپ کردید، می پردازیم:

به کدهای زیر توجه کنید :

<?php if(have_posts()) : ?>

<?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

ابتدا if(have_posts()) چک می کند که آیا هیچ گونه پستی در این وبلاگ وجود دارد یا خیر. سپس حلقه ی while(have_posts()) دستور the_post() را برای صدا زدن پست های شما اجرا می کند. عبارت else برای زمانی است که هیچ پستی وجود نداشته باشد. اگر کمی با برنامه نویسی php آشنا باشید، براحتی منظور من را متوجه شده اید، اما اگر آگاهی چندانی از این زبان ندارید، به زبان عامیانه باید اینگونه عرض کنم که عبارت شرطی if که به معنای اگر است، ابتدا سعی می شود که اجرا گردد، اما اگر این شرط بدلیل نبود پست، اجرا نشد، عبارت else که به معنای در غیر اینصورت است، اجرا خواهد شد. یعنی یا if اجرا می شود و یا else و البته عبارت شرطی if به else ارجحیت دارد. امیدوارم که منظور من را متوجه شده باشید. توجه شود، هنگامی که شرطی را آغاز می کنید، باید پایان آن شرط را در آخر مشخص کنید، بنابراین برای پایان دادن به شرط if از دستور <?php endif; ?> کمک گرفته ایم. همین موضوع برای حلقه نیز صادق است، یعنی زمانی که حلقه ای را شروع کردیم، باید پایان آن را نیز مشخص کنیم، پس برای مشخص کردن پایان حلقه از عبارت <?php endwhile; ?> استفاده کردیم. اگر جلسه ی اول را بیاد بیاورید در مورد قانون تو در تویی توضیح دادیم، که نمود بارز آن در اینجا مشخص است.اگر دقت کنید متوجه می شوید که ابتدا شرط آغاز شده ، سپس حلقه آغاز شده ، بعد دستورات داخل حلقه اجرا شده، سپس حلقه بسته شده و در آخر شرط نیز بسته می شود، یعنی هیچگونه تداخلی در باز و بسته شدن اینگونه کدها نباید وجود داشته باشد.

حالا شما می دانید که else برای چیست. در زیر مجموعه ی else یک باکس مخفی ایجاد کردیم و داخل آن نوشته ایم Not Found یا همان یافت نشد خودمان. این بدین معنی است که اگر پستی وجود داشت که هیچ، ولی اگر پستی یافت نشد، آنگاه عبارت Not Found برای شخص بیننده نمایش داده خواهد شد. چه منطقی و ساده….

در مثال بالا، پیغام Not Found درون <?php _e(’ ‘); ?> قرار گرفته است. دیگر توضیح نمی دهم که اینکار برای چیست.

تمامی پیغام ها و کدها برای عبارت Not Found با تگ های <h2> و </h2> احاطه شده است. البته اینکار آنچنان واجب نیست. اینکار را برای این انجام داده ایم که نوشته ی ما بزرگتر به نظر برسد و بیننده راحت تر بفهمد که اشتباه کرده است و چیزی را در سایت شما پیدا نمی کند، شوخی کردم، امیدوارم که سایت شما پر از محتوا باشد.

◊ اما تگ های <div class=”post”> و </div> برای چه هستند؟
خوب مشخص است، جوابش را شما بگویید. بعد از این همه جلسه دیگر نگفتنش مایه آبروریزیست.

● مرحله ی دوم:

مقدار id=”post-<?php the_id(); ?>” را به <div class=”post”> اضافه کنید:

تغییرات را ثبت کرده و مرورگرتان را refresh کنید. حال به تب View رفته و Page Source یا Source را انتخاب کنید . شما خواهید دید که هر پستی حالا یک شماره یا id دارد که به آن اضافه شده است. کد the_id() به سادگی id هر پستی را صدا می زند و آنرا در کد صفحه نشان می دهد. حتماً دیده اید که سایتهای وردپرس در حالت عادی آدرس سایتشان به صورت http://www.p30help.ir/?p=125 است، عدد ۱۲۵ همان مقدار id می باشد.

◊ چرا اینکار را کردیم؟
اینکار برای این است که بطور اختصاصی یک پست خاص را مورد هدف قرار دهیم. برای مثال شاید شما بخواهید که ظاهر یکی از پست هایتان با سایر پست ها متمایز باشد، برای ایجاد تمایز بین پست ها، ما این عمل را انجام دادیم. بعدها، هنگامی که شما از فایل Style.css استفاه می کنید. به کمک id منحصر به فردی که هر پست دارد، قادرید تا این تمایز را بین هر پست ایجاد کنید.

◊ چطور می توان هم Class و هم id را برای یک div یا باکس مخفی قرار داد؟
div یک تگ هست، اما class یک مشخصه می باشد. id نیز یک مشخصه است. هر تگی می تواند چندین مشخصه را قبول کند مثل تگ div که می تواند ۲ مشخصه ی class و id را قبول کرده است.(توجه کنید id یک مشخصه ی Xhtml و عبارت the_ID() یک تابع php است و این دو با یکدیگر متفاوتند).

● مرحله سوم :

عبارت title=”<?php the_title(); ?>” را به لینک عنوان پست ها اضافه کنید.

عکس بالا یک قطعه از اسکرین شات است تا به شما نشان دهد که کد را کجا باید قرار دهید. تغییرات را save کرده و مرورگرتان را refersh کنید. به view source دوباره بازگردید. وقتی که پنجره ی Source رامشاهدده کردید، post title link را جستجو کنید. اگر عنوان مطلب شما Hello World باشد، آنگاه باید title=”Hello World” را داشته باشید.

توضیح: title=”” یکی دیگر از مشخصه های xhtml برای تگ لینک (<a>) می باشد. هرچیزی که داخل علامت نقل قول قرار گیرد، برای توصیف لینک شما بکار برده می شود. در این مورد، عنوان هر پست، توصیف همان لینک نیز می باشد، این هست دلیل اینکه چرا از تابع پی اچ پی the_title() دوباره استفاده کردیم.

اگر نمی خواهید از the_title() بعنوان یک مقدار برای title=”” استفاده کنید، آنگاه می توانید مقدار دیگری که title=”” بگذارید، تا بعنوان توصیفات برای لینک عنوان مطلب شما محسوب  شود. برای مثال، اگر در عوض the_title() ، شما از title=”Click me” استفاده کنید، توصیف برای عنوان هر پست Click me خواهد بود.

حالا ، به صفحه ی وب بازگردید، کرسر موس را بروی عنوان هر پست قرار داهید، خواهید دید که توصیفات بصورت تول تیپ دیده خواهند شد. به عکس زیر نگاه کنید تا بهتر متوجه شوید:

◊ این عمل برای چیست؟
هرگاه که شما پستی را منتشر کردید، وردپرس Technorati.com و سایتهای دیگر رامطلع می سازد. ربات Technorati.com سپس به وبلاگ شما آمده و مطالب جدیدتان را تجسس کرده و در آخر یک خلاصه ای از پست شما را ایندکس می کند، که این خلاصه ، شامل عنوان توضیحات مطلبتان نیز می شود. کلاً بدانید که چیز خوبی است….

در جلسه ی بعد به شما یاد خواهیم داد که چگونه برای قالبتان امکان صفحه ی بعد و صفحه قبل را بگذارد. به جد، برای این دو درس سختی کشیدم، باشد که مورد پسند شما قرار گیرد.

پی نوشت: خواستم این پست شامل سه درس باشد، اما هم خودم واقعاً خسته شدم و هم اینکه یاد دهی مطالب زیاد باعث عدم هضم این مطالب می گردد.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)

Write a quick comment | مشاهده‌ 26 نظر دیگر

نزدیک به یه ماه است که سری آموزشی ساخت پوسته ی وردپرس را آغاز کرده ایم و در این جلسه قصد داریم تا جلسه ی هفتم از این سری را به شما آموزش دهیم. در این جلسه علاوه بر اینکه باید جمله ی تکراری ام را تکرار کنم (همان جمله ی معروفی که از جلسه ی اول شروع کنید و سپس با ما همراه باشید، برای اینکار از این لینک کمک بگیرید) باید این نکته را نیز به شما گوشزد کنم که جلسه ی قبل یکی از جلسات بسیار مهم این سری آموزشی بود، بنابراین اگر جلسه ی قبل را مطالعه نکرده اید و یا آنرا خوب متوجه نشده اید، حتماً دوباره مطالعه کرده و سوالات خود را از ما دریغ نفرمایید.

در جلسه ی پیش عنوان هر یک از پست های وبلاگ را به داخل صفحه آوردیم، در این جلسه می خواهیم که محتوا (Content) و یا همان مطالب اصلی پست را نیز به داخل صفحه بیاوریم. در این جلسه همیچنین مقدار بیشتری تگ باکس مخفی (div) برای مجزا کردن محتوای هر پست از عنوان آن (پست)، بکار خواهیم برد. پس برای فراگیری مطالب امروز با ما همراه باشید…

بعلت طولانی شدن صفحه، به ادامه مطلب مراجعه کنید…

امروز هم، همان کارهای اولیه را انجام می دهیم. برنامه ی Xampp را اجرا کرده، فولدر tutorial از بخش پوسته های وردپرس را گشوده، یک صفحه از مرورگر وب را باز کرده و آدرس http://localhost/wordpress را در آن نوشته و در آخر هم فایل index.php را باز می کنیم.

● مرحله ی اول

کد <?php the_content(); ?> را در زیر کدهای عنوان مطالبتان تایپ کنید:

تغییرات را save کرده و مرورگرتان را refresh کنید. شما باید الان نوشته های هر پست را در زیر عنوان همان پست مشاهده کنید.

◊ چه چیز اتفاق افتاد و این کار شبیه به چه بود؟

شما از تابع the_content() در php استفاده کردید که پست های ورودی (post entries) یا همان centent را صدا می زند. حتماً متوجه شده اید که مطالب ورودی شما، تمام عرض پنجره ی مرورگر را گرفته اند. این بدین خاطر است که شما هنوز استایلی برای آن تعریف نکرده اید. بیاد داشته باشید که فایل style.css نیز وجود دارد که هنوز شما با آن کارنکرده اید، بعدها که با استایل بیشتر آشنا شدید، خواهید آموخت که چگونه به باکسهای مخفی و سایر قسمتهای صفحه، ویژگی بدهید.

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

ادامه دهید…

برگردید به مرورگرتان، بروی تب View کلیک کنید و گزینه ی Page Source یا Source را انتخاب نمایید. یک پنجره از کدها برایتان باز خواهد شد. اگر شما از IE استفاده کنید یک صفحه ی Notepad برایتان باز خواهد گشت.

من با افتخار از Firefox استفاده می کنم و در اینصورت، پنجره ی Source برای من اینگونه به نظر می رسد:

توجه کنید که بین محتوای فایل index.php و کدهای پنجره ی Source تفاوت وجود دارد. تمامی نوشته ها و عکس ها و غیره و به طور کلی، هرچیزی که درون این پنجره و یا همان notepad وجود دارد، بوسیله ی تابع the_content() صدا زده شده است. جالب است نه؟؟ بدون وبلاگ و مخصوصاً قالب های وردپرس، شما تمام این عکس ها و نوشته ها را بصورت کد، مشاهده خواهید کرد.

همچنین، توجه کنید که تگهای باز و بسته ی P ، بدور متن من قرار گرفته اند (تگ P جزو Xhtml است) در حالی که این تگها در فایل index.php وجود ندارند، ولی آنها در پنجره ی کدهای Source یا notepad شما نمایان هستند؟ برای یافتن جواب، پاراگراف بعدی را مطالعه کنید

◊ تگ های P ، چرا و چطور؟؟

» چرا - وقتیکه شما ورودیهای وبلاگ و یا همان Content را تایپ می کنید، هرگاه که بوسیله ی دکمه ی Enter به خط بعدی می روید، یک پاراگراف را تشکیل می دهید. شما نیازمند این هستید که یک راه برای نشان دادن آن پیدا کنید. هر پاراگرافی داخل تگه های P قرار می گیرد. در اصل تگ P مخفف Paragraph می باشد. در حقیقت بدانید که این تگ P جزو همان فایلهای ورودی بحساب می آید و یک قسمت مجزا نیست که بعداً به نوشته ی شما اضافه شود.
» چطور - اما اگر برایتان این سوال پیش آمده که چطور این تگها به دور نوشته های من قرار گرفته اند، جواب خیلی ساده است، قالب های سیستم وردپرس بطور خودکار تگ های P را برای شما می سازند.

● مرحله ی دوم:

یک باکس مخفی (div) بدور عبارت the_content() قرار دهید و به آن class=”entry” را اضافه کنید. به مانند زیر:

<div class=”entry”>

</div>

شما الان باید داشته باشید.

تغییرات را ثبت کرده و صفحه ی مرورگر را referesh کنید.حال اگر شما به منوی view بروید و سپس گزینه ی Page Source را کلیک کنید، خواهید دید، تگ div به همراه class=”entry” بدور هر پست ورودی تان قرار گرفته است.

◊ چرا؟

اولین دلیل، با اینکار شما می توانید بگویید که کجا عنوان یک مطلب تمام می شود و کجا محتوای یک پست شروع می شود. دومین دلیل، برای استایل بندی (یا همان صفحه آرایی) بوسیله ی فایل Style.css است. شما بعدها یاد خواهید گرفت.

◊ چه تفاوتی بین id و Class وجود دارد؟

تا اینجا، برای هر باکس مخفی و یا تگ div، شما از id برای نام دهی به آن استفاده می کردید. برای مثال id=”header” را بیاد بیاورید! بنابراین چه تفاوتی بین این دو وجود دارد؟ تفاوت این است، id منحصر به فرد است ولی calss اینگونه نیست. اگر شما نگاهی بیاندازید به کدهای پنجره ی Source ، خواهید دید که تنها یک id=”header” وجود دارد و یا تنها یک id=”container” وجود دارد، در صورتی که چندین class=”entry” را مشاهده خواهید کرد.

◊ آیا برای header و container می توان بجای استفاده از id از class استفاده کرد ؟
جواب : بله

این را در مغزتان نگه دارید: شما نباید هیچ id تکراری را داشته باشید. برای مثال، شما نمی توانید دو تا id=”header” بروی یک صفحه داشته باشید. بنابراین در شرایطی که شما می بایست از تگهای div چندین بار استفاده کنید، بجای استفاده از id برای نام دهی آنها، از class کمک بگیرید مانند باکس مخفی برای پست های ورودی که از class کمک گرفتیم.

● مرحله ی سوم:

تگ div را به دور عنوان پستها و پستهای ورودی (content) قرار دهید. نام آن را class=”post” بگذارید.

<div class=”post”>

</div>

توجه: نام های انتخاب شده برای class ها و id ها می تواند هر چیزی باشد. شما می توانید از این پس، نام غذاهای مورد علاقه تان، بازیگران مورد علاقه تان و… را برای آنها قرار دهید، اما کلماتی مانند post و entry علاوه بر اینکه کوتاه و ساده هستند، براحتی می توانند منظورمان را هم برای خود و هم برای دیگران شرح دهند. اینطور نیست؟؟

بعد از اضافه کردن کد بالا باید داشته باشید:

و عکس زیر ، یک نسخه از حالت سازماندهی شده ی کدهای بالا است:

من برای برجسته کردن کدها از دکمه ی tab بجای دکمه ی spacebar استفاده می کنم.

چرا سازماندهی؟ بر خلاف عکس بالا، کدهای شما با هایلایت قرمز و سبز مشخص نیستند. شما نیازمندید تا کدها و وظیفه ی آنها را بیاد بیاورید. بوسیله ی این نوع برجسته کردن (فاصله های بوجود آمده از tab) حالا این عمل آسان است که برای مثال بگوییم که تگ </div> کجا بسته شده است.

فایل index.php را save کرده و مرورگرتان را refresh کنید تا تمامی تغییرات ایجاد شده در پنجره ی کدهای Source را مشاهده کنید.

◊ چرا  یک تگ div دیگر به دور عنوان پست و مطالب پست ها اضافه کردیم؟
جواب: شما عبارت div class=”entry” را برای مجزا کردن عنوان یک پست ها از مطلب همان پست اضافه کردید. در صورتی که عبارت div class=”post”را برای جدا کردن کل یک مطلب از دیگری اضافه کرده اید.

این درس امروز ما بود؛ ممکن است کمی هضم کردن این اطلاعات برای شما سخت باشد، ولی با کمی کار کردن تمامی این مشکلات حل خواهد شد.
در جلسه ی بعد به شما نحوه ی درگیر شدن با تاریخ ، دسته ها و بخش نظرات را به شما خواهیم آموخت.

درسهای بعدی از این سری آموزشی را دنبال کنید….

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس

Write a quick comment | مشاهده‌ 12 نظر دیگر

در این درس به آموزش نحوه ی آوردن بخش ورودی های وبلاگ یا همان پست های وبلاگ تان خواهیم پرداخت. دوباره مجبورم قبل از شروع درس، این نکته را بگویم که اگر این سری آموزشی وردپرس را از ابتدا دنبال نکرده اید، حتما از طریق این لینک این کار را انجام دهید….

امیدوارم که این کار را کرده باشید. بگذریم…..
بیشتر بدانید: اگر کمی با PHP کار کرده باشید مطمئناً با حلقه ها آشنا هستید. حلقه ها یکی از اجزای مهم در برنامه نویسی می باشند. بوسیله ی حلقه ها قادر هستید تا یک فرمان را به اندازه ای که مایلید، تکرار کنید. روشهای مختلفی برای ایجاد حلقه وجود دارد، که البته در بحث امروز ما نمی گنجد. ما در این درس به کمک حلقه ها ورودی های سایت یا پست های سایت را وارد صفحه کنیم، اگر کمی فکر کنید، متوجه خواهید شد که حلقه ای که استفاده خواهیم کرد برای کجا و چه استفاده خواهد شد.

تا اینجای کار، ما به شما موارد زیر را درس داده ایم:

۰ قوانین ، ساختار ، و سلسله مراتب در پوسته های وردپرس.
۰ هر صفحه ای از چه چیز تشکیل شده است.
۰ چگونه پوسته ی را نصب کنیم.
۰ چگونه عنوان وبلاگمان را صدا بزنیم و سپس از آن یک لینک بسازیم.
۰ چگونه توضیحات وبلاگ را صدا بزنیم و header را از اجزای دیگر مجزا کنیم.

چون صفحه طولانی می شود برای شروع درس و آشنایی بیشتر با حلقه ها به ادامه مطلب مراجعه کنید…

همانطور که می دانید ، باید ابتدا برنامه ی Xampp را راه‌اندازی کنید. فولدر tutorial را در بخش پوسته های وردپرس بگشایید، یک مرورگر وب باز کنید و آدرس http://localhost/wordpress را در آن تایپ کنید، و در آخر فایل index.php را در notepad هم باز کنید.

آنچه در جلسات قبل انجام داده ایم را می توانید در عکس زیر مشاهده کنید.

بیاد داشته باشید، هر کدی را تایپ کنید و هیچ چیز را کپی نکنید.

● مرحله ی اول:

یک تگ div (باکس پنهان) را زیر ناحیه header اضافه کنید و به id آن مقدار “container” را نسبت دهید، مانند زیر:

<div id=”container”>

</div>

این div برای چه هست؟ این تگ برای این هست که محتوای اصلی و یا همان پست های سایت را از هر چیز دیگری، که بعد از آن می آید، جدا کند. چیزهایی مانند Footer و Sidebar

● مرحله ی دوم:

کد زیر را بین تگ باکس مخفی ای که مقدار id آن container هست، اضافه کنید. کد های زیر را بطور دقیق وارد کنید. اگر هرگونه ایرادی را مشاهده کردید، دوباره کدهایتان را چک کنید:

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

<?php endwhile; ?>

<?php endif; ?>

از این مرحله، مفاهیم برایتان آسانتر خواهد بود، تا متوجه شوید که کد نوشته شده چه اعمالی را انجام خواهند داد.

آنچه که شما  تایپ کردید، یک حلقه (The Loop) در وردپرس هست. قبل از اینکه این کدها را شرح بدهم. شما باید چیزی شبیه به عکس زیر داشته باشید:

توجه کنید که خطوط درون باکس مخفی یا همان div را تو رفته تر نسبت به خطهای دیگر تایپ کرده ام. این کار را برای سازماندهی و تشخص دادن بهتر انجام دادم. اینکه شما فقط کدها را تایپ کنید، کافی نیست، شما باید این کدها را مدیریت کنید تا بتوانید آنها را آسانتر تشخیص بدهید. با اینکار بعدها، شما می دانید که جای هر کدی در کجاست و در کجا شروع و تمام می شود و کدهای مربوطه، در کدام قسمت قرار دارند. من برای جلو آوردن هر کدی از دکمه TAB بجای Spacebar استفاده کردم. بعدها که صفحه ی شما پر از کد شد، قدر اینکار را خواهید دانست.

◊ چه چیز اتفاق افتاد؟

» if(have_posts()) - یک عبارت شرطی است و چک می کند که شما آیا پستی دارید یا خیر؟ در حقیقت این کد را می توان اینگونه خواند: «اگر پستی وجود داشت اجرا کن…»
» while(have_posts()) - این کد همان حلقه ی مورد نظر ماست و معنی آن می شود: «تا زمانی که پستی وجود داشت، the_post() را اجرا کن».
» the_post() - پست ها را برای نشان دادن  صدا می زند.
» endwhile; - همان قانون اول است – این عبارت حلقه ی while() را می بندد.
» endif; - شرط if() را می بندد.(قانون اول)

توجه: لازم نیست تمام کدهایی را که بازکرده ام، حتماً در آخر ببندیم بعضی از کدها از دو بخش ساخته نشده اند. برخی کدها می توانند خودشان، خودشان را ببندند، مثل: have_posts() یا the_post(); . کمی که با این مباحث بیشتر آشنا شوید، به راحتی می توانید بفهمید که چه کدی نیاز به بسته شدن دارد، و چه کدی نیازمند این عمل نیست.

● مرحله سوم:

در درس قبلی، شما یاد گرفتید که چطور عنوان وبلاگتان (blog’s title) را بوسیله ی bloginfo(’name’) صدا بزنید. حالا، باید برایتان آسانتر باشد که چگونه عنوان پست ها (post titles) را صدا بزند. برای اینکار در بین حلقه ها (The Loop) عبارت <?php the_title(); ?> را بعد از the_post(); ?> و قبل از <?php endwhile; ?> تایپ کنید. مانند زیر:

تغییرات را در فایل index.php ثبت کنید، مرورگرتا را refresh نمایید. شما باید عنوان hello World را در زیر توضیحات وبلاگتان مشاهده کنید. البته در حالت پیش فرض، وبلاگ شما تنها یک پست دارد. البته شما می توانید چندین پست را خودتان به وردپرس اضافه کنید، تا چند عنوان مختلف را مشاهده کنید. برای مثال من خودم چندین پست به وردپرس اضافه کرده ام و چون  عنوان پست ها را همگی hello world گذاشته ام، شما یک خط طولانی شامل عبارت های hello world را مشاهده خواهید کرد.

● مرحله چهارم:

الان عنوان پستهای شما قابل رویت است ولی امکان لینک ندارند. برای فعال کردن آدرس و یا لینک عنوان پست ها باید….. بیاد بیاورید که چگونه لینک را برای عنوان وبلاگ، فعال کردیم. دقیقاً مانند همان روش، تگ <a href=”#”> و </a> را بدور کد <?php the_title(); ?>اضافه می کنیم

فایل index.php را save کنید و سپس صفحه را refresh نمایید. حالا عنوان پست های شما همگی حالت لینک دارند، اما لینک ها به هیچ جای خاصی نمی روند. برای اینکه برای هر پست آدرس درستی را به هر لینک بدهیم، باید عبارت the_permalink() را بجای # قرار دهیم. مانند عکس زیر:

<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>

the_permalink() یک تابع از php است، که آدرس یا مکان هر پست را صدا می زند. صفحه را save کنید و سپس صفحه ی مرورگر را refresh نمایید . نشانگر موس را بروی یکی از عنوانهای Hello World برده و به Stutus bar نگاه کنید. خواهید دید که در Status bar آدرس مطلب شما را نشان داده خواهد شد، مانند عکس زیر:

اگر شما بیشتر از یک پست داشته باشید، خواهید دید که هر لینکی به یک پست مجزا یا صفحه ی مجزا می رود. اما، عنوان های پست ما، در یک خط هستند، برای مجزا کردن آنها،  تگهای <h2> و </h2> بدور کد لینکتان اضافه کنید. یعنی:

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

بیاد بیاورید H1 را که ما برای عنوان وبلاگمان استفاه کردیم. این heading صفحه ی وب شما هست. حالا لینک های مطالب شما sub-headings هستند. الان باید تمام لینک پست های شما در خطوط خودشان باشند. فایل index.php را save کرده و مرورگر را refersh کنید تا تغییرات برایتان نمایان شود.

در پایان باید صفحه ی کد شما به شکل زیر باشد:

خوب درس ما به پایان رسید.

توجه: اگر شما خوب منظور من را متوجه نشده اید. باید چندین پست مختلف به وردپرس تان اضافه کنید(مهم نیست که محتوای آن چه باشد) تا پوسته تان به درستی آزمایش شود. برای اینکار به بخش مدیریت وردپرس خود رفته و در زیر مجموعه ی نوشتن، چندین پست اضافه کنید. پیشنهاد می کنم تا عنوان هر پست را منحصر به فرد گذاشته تا کمتر دچار سردرگمی شوید.

با آموزشهای بعدی از سری آموزشی ساخت پوسته ی وردپرس با ما همراه باشید. تا بعد…..

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 5)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه پوسته های وردپرس را فارسی کنیم؟

Write a quick comment | مشاهده‌ 6 نظر دیگر