دانلود از ۴shared

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

مطالب مرتبط

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

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

خوب باید این خبر خوش را به شما بگویم، که بعد از مدتها این سری آموزشی به اتمام رسید. اولین پست این سری آموزشی در تاریخ ۰۳/۱۰/۱۳۸۷ نوشته شد و امروز یعنی در تاریخ  ۲۶/۶/۱۳۸۸ این سری آموزشی به پایان می رسد، یعنی نزدیک به ۷ ماه این سری آموزشی که شامل ۲۱ جلسه بود، ادامه پیدا کرد. دوستان زیادی به من گفتند که این سری آموزشی را سریعتر ادامه بدهم، و باید الان به اینان گفت که این سری در نهایت به پایان رسید. با وجود تمام سختی ها و مشکلات، باید بگویم که خوشحالم که توانستم خدمتی هر چند کوچک به وردپرس کرده باشم…

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

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

در ابتدا باید بگویم که روش ساختن بخش نظرات به دوشکل ممکن است، یک- حالت پیش فرض وردپرس، که با تایپ فقط یک خط کد امکانش میسر می شود. دو- روشی که ما نظرات را با نظر و سلیقه ی خود، درون فایلی بنام comments.php می نویسیم تا سبک نمایش را خودمان تعیین کنیم. که در این درس ما روش دوم را به شما می آموزیم.

البته شما باید بدانید:
» روش دوم یعنی تنظیم کردن قالب در فایل commnets.php راه آنچنان استانداردی نیست و بهتر است که از پیش فرض وردپرس استفاده شود.
» بیشتر طراحان وردپرس از الگو پیش فرض نظرات وردپرس استفاده می کنند.
» بعضی از طراحان از الگوی پیش فرض وردپرس صرف نظر می کنند چون حتماً آن نیازشان را براورده نمی کند.
» شما از ورژن اصلاح شده ی الگو پیش فرض نظرات من استفاده می کنید.

• مرحله ی اول:

» یک فایل جدید بنام comments.php بسازید
» کدهای داخل فایل comments.txt را به درون فایل comments.php کپی کنید.
» کدهای داخل فایل comments.php را save کنید.

• مرحله ی دوم:

» کدهای درون فایل comments-template-css را کپی کنید.
» این کدها را در پایین یا در زیر سلکتور #footer بچسبانید.

• مرحله ی سوم:

در فایل single.php، در زیر تگ باکس مخفی ای که مشخصه ی id آن entry است، کدهای زیر را تایپ کنید:

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

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

شما همچنین می توانید از تابع  comments_template() در فایل page.php استفاده کنید، تا به بینندگان اجازه دهید تا امکان نظر دهی برای برگه های قالب شما نیز میسر باشد. اگر مایلید که اینکار را انجام دهید، دقیقاً همین مراحل را برای فایل page.php انجام دهید.

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

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

» به آدرس View > Page Source یا Source بروید.
» تمامی این کدها را کپی کنید.
» به سایت validator بروید.
» تمامی این کدها را در بخش Direct Input بچسبانید و یا paste کنید.
» بروی دکمه ی check کلیک کنید.

برای مرجع بعدی (وقتی شما پوسته ی خودتان و بخش نظرات را طراحی کردید) از صفحات زیر نیز اعتبار سنجی کنید:

• Home page
• Archive pages
• Category pages
• Search result pages
• Pages (مثل: About)
• Single post با page
• Single post بدون بخش نظرات
• Single post با بخش نظرات
• Single post با پیغام باید برای نظر دادن حتماً وارد شوید
• Single post بدون محدودیتی برای نظر دادن
• Password protected single post با comments

◊ توضیحات بیشتر برای الگوی نظرات:

» الگوی نظرات اساساً یک لیستی با تگ ol می باشد. اگر چه این تگ با سایر تگهای این سبکی فرقی ندارد (مانند تگهای li) اما یک تفاوت کوچک دارد. تگ غیر ol هر آیتم را با یک نقطه از دیگری متمایز می کنند ولی تگ ol هر آیتم را با شماره از دیگری متمایز می کند. (اگر متوجه نشده اید، ناراحت نباشید، این خط در حقیقت تنها برای دادن اطلاعات بیشتر بود و در امتحان پایان ترم نمی آید.)
» در فایل single.php، شما تگ div با نام مشخصه ی آی دی comments-template بدور تابع comments_template() قرار داده اید. در حقیقت تگهای ol توسط تگ div محصور شده اند.
» وقتی شما مطلبی را با پسورد منتشر می کنید، بخش نظرات شما نیز همچنین بوسیله ی پسورد محافظت می شوند.

این کدهای عکس زیر هستند که لیست نظرات را می سازند:

و این آنچه که واقعاً منظور ماست در عکس زیر مشهود است:

تابع comment_text() محتوای نظر هر شخص را صدا می زند. مثلاً اگر من نظر داده باشم، که چطوری رفیق خیلی مطلبت باحال بود داداش… این نوشته دقیقاً توسط تابعی که گفته شد نمایش داده می شود.

من شرح کدها درون فایل Style را به خود شما واگذار می کنم . بر خلاف کدهای درون فایل comments.php شما واقعاً می توانید با کدهای CSS بدون ایجاد ایرادی بازی کنید تا به آنچه که نیاز دارید برسید.

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

البته یک درس متفرقه ی دیگر باقی مانده و آن نحوه ی فارسی سازی قالب های وردپرس است که به آن نیز خواهیم پرداخت…

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

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

مطالب مرتبط

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

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

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

هماگونه که گفته شده در این درس نیز قصد تقسیم کردن فایل 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 نظر دیگر

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

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

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

در این بخش از آموزش، با لیست برگه های (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

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

در جلسه ی پیش عنوان هر یک از پست های وبلاگ را به داخل صفحه آوردیم، در این جلسه می خواهیم که محتوا (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 نظر دیگر

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

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

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

نکته: به هیچ عنوان کدهایی که به شما گفته می شود را کپی و Paste نکنید و خودتان آنرا را تایپ کنید.

● مرحله ی  اول:

۱- برنامه ی Xampp را فعال کنید.
۲- فولدر پوسته هایتان ، که نامش را Tutorial  گذاشته اید را باز کنید
۳- یک مرور گر وب باز کنید و در آن آدرس http://localhost/wordpress را تایپ کنید.(دلیل قرمز بودن wordpress را در جلسات گذشته گفته ایم).
۴- به فولدر پوسته بازگردید و فایل index.php ر ادر notepad باز کنید.

بعد از انجام مقدمات کار مرحله ی بعدی و یا اصل درس را شروع می کنیم:

● مرحله دوم :

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

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

حال به دور عبارت بالا تگ های <h1> و </h1> را اضافه کنید. تگ H1 به معنی heading 1 است. شش heading بطور کلی وجود دارند: H1, H2, H3, H4, H5, H6 . بطور پیش فرض، H1 بزرگترین سایز و H6 کوچکترین سایز می باشد.

نکته: اگر بخواهیم به زبان ساده تگ H1 را توصیف کنم، باید بگویم که در واقع تگ H1 ، یک سایز پیش فرض از فونت می باشد. یعنی اگر این تگ بدور یک نوشته ی ما قرار گیرد، همانگونه که در بالا گفته شد، نوشته ی ما بزرگترین سایز پیش فرض را می گیرد و اگر تگ H6 قرار بگیرد، نوشته ی ما کوچکترین سایز پیش فرض را به خود می گیرد. دلیل اینکه می گوییم سایز ییش فرض این است که می توانیم در فایل Style.css این تنظیمات را تغییر داده و اندازه را با توجه به خواسته ی خودمان تغییر دهیم. که البته در جلسات بعد با اینگونه اعمال بیشتر آشنا می شوید.

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

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

تغییرات را save کرده و به مرورگر برگردید و آن را refresh کنید. مسلماً عنوان وبلاگ (blog’s title) شما بزرگتر شده است. جالب است نه….

● مرحله سوم:

در این مرحله قصد داریم تا  توضیحات وبلاگمان (description) را صدا بزنیم و یا فراخوانی کنیم، برای اینکار عبارت <?php bloginfo(’description’); ?> را درست در زیر عبارت عنوان وبلاگ (blog’s title) تایپ کنید، حال کد شما باید بصورت زیر باشد:

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

تغییرات را ثبت کرده و صفحه را refersh کنید، مشاهده خواهید کرد که توضیح وبلاگتان در زیر لینک عنوان وبلاگتان (blog’s title) اضافه شده است. این نکته را نیز بگوییم که شما می توانید توضیحات وبلاگتان (description) را در بخش مدیریت وردپرس تنظیم کنید.

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

» <?php - شروع کدهای php
» bloginfo(’description’) - اطلاعات وبلاگتان را (بویژه در اینجا توضیحات وبلاگتان (description) را) صدا می زند. (به دلیل اینکه مقدار bloginfo(’’) را description قرار داده ایم، فقط توضیحات وبلاگتان (description) فراخوانی می شود).
» ; - صدا زدن توضیحات وبلاگ (description) را متوقف می کند.
» ?> - پایان کدهای php

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

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

بدور کدهایی که تاکنون نوشته اید تگ های <div> و </div> را تایپ کنید، در نتیجه خواهیم داشت:

<div>

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

</div>

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

شاید خیال کنید که تگ div یک تگ بلا مصرف است، اما در جلسات بعد علاوه بر اینکه بر روح سازنده ی آن درود خواهید فرستاد، کاربرد آنرا نیز بیشتر خواهید فهمید. ولی به طور اجمالی در اینجا در مورد این تگ توضیحاتی خواهیم داد: ما این تگ را قرار دادیم تا لینک عنوان وبلاگ (blog’s title) و توضیحات وبلاگ(description) را از هر چیز دیگر موجود در صفحه جدا کنیم، حال اگر شما از این تگ استفاده نکنید. هیچ محتوایی از پوسته ی شما مجزا نخواهد بود و در حقیقت همه چیز تو در تو خواهد بود. شما با قرار دادن تگ div به دور کدهای بالا در حقیقت یک باکس مخفی بدور آن ایجاد کرده اید که علاوه بر جدا کردن محتوای داخل آن از سایر عناصر موجود در صفحه، می توانید  بعد ها در فایل style.css برای باکس های مخفی (تگ div) ویژگی تعریف کنید و در حقیقت سایت تان را بسازید. کارهایی نظیر حاشیه دادن ، لایه گذاری ، لبه گذاشتن ، عکس پس زمینه ، رنگ پس زمینه و غیره.. را می توانید بروی این تگها اعمال کنید.

ممکن است این سوال برای شما پیش بیاید که با توجه به اینکه تگ باکس مخفی یا همان div را برای بسیاری از اجزای صفحه بکار می بریم، چگونه می توان بعدها در فایل Style.css یک تگ div مخصوص را مورد تغییر قرار داد. جواب شما در مرحله ی پنجم قرار دارد…

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

مقدار id=”header” را به تگ div اضافه کنید مانند زیر:

<div id=”header”>

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

البته الان ، باز هم هیچ تغییر را مشاهده نخواهید کرد. ما یک id را به تگ div اضافه کردیم. دلیل اینکه ما به این تگ div یک id اضافه کردیم این است که بتوانیم بعداً در فایل Style.css تگی با مقدار آی دی header را مورد تغییر قرار دهیم،  زیرا تگ های div زیادی وجود خواهند داشت و شما باید به گونه ای آنها را از یکدیگر متمایز کنید.

نکته: اگر از این به بعد واژه ی باکس مخفی را بکار بردیم بدانید که منظورمان همین تگ div است.

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

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

مطالب مرتبط

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

Write a quick comment

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

در جلسه ی قبل، من به شما نشان دادم که چگونه در بخش کنترل برنامه Xampp ، آپاچی و MySQL را فعال کنید. پوسته تان را نصب نمایید، و در آخر شما را کمی با PHP آشنا کردیم. امروز ما با PHP ادامه داده و به شما یاد خواهیم داد که  چگونه عنوان وبلاگتان (blog’s title) را صدا بزنید یا فراخوانی کنید.

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

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

خوب درس را شروع می کنیم:

● مرحله اول:

از طریق کنترل برنامه ی Xampp، آپاچی و MySQL را فعال کنید. سپس، فولدر پوسته هایتان را که در آدرس زیر:
xampp/htdocs/wordpress/wp-content/themes/tutorial قرار دارند را باز کنید. شما هم اکنون باید ۲ فایلی که جلسه ی قبل ساخته اید را مشاهده کنید. فایلهای index.php و Style.css

فایلهای index.php و style.css باید با فایلهای index.txt و style.txt پر شده باشند(یعنی باید محتویات داخل آنها یکی باشد).

● مرحله دوم:

- یک پنجره از مرورگر وب باز کنید.  سپس به آدرس http://localhost/wordpress بروید . شما باید یک صفحه ی خالی مشاهده کنید ، چون شما یک پوسته ی خالی را در جلسه ی قبل نصب کردید.
(wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس انتخاب کرده اید).
- به فولدر پوسته هایتان باز گردید و فایل index.php در notepad باز کنید. برای اینکار بروی Index.php راست کلیک کرده ، properties را انتخاب نموده و بروی change کلیک کنید ، سپس  notepad یا ویرایشگر متن دلخواه تان را انتخاب کنید. من به شخصه  notepad را انتخاب کردم . در آخر نیز بروی ok کلیک کنید.

تا اینجا، شما، فولدر پوسته هایتان، یک مرورگر وب و فایل index.php را (با notepad)  باز کرده اید.

● مرحله ی سوم:

شما باید به محتویات داخل فایل index.php دقت کنید. حال برای شروع:

عبارت <?php bloginfo(’name’); ?> را در بین تگ های <body> و </body> تایپ کنید و تغییرات را save نمایید.

سپس بازگردید به صفحه ی مرورگر وب تان و آن صفحه را Refresh کنید(بوسیله ی دکمه ی F5 هم می توانید اینکار را انجام دهید). شما باید عنوان وبلاگتان را مشاهده کنید. عنوان وبلاگ من این هست : Demo Theme Development

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

شما یک خط از کدهای PHP را درون فایل index.php و درون تگهای body از صفحه ی وب تان  اضافه کردید. این یک خط اطلاعات وبلاگتان را صدا می زند. در حقیقت دستور bloginfo() وظیفه ی صدا زدن و یا فراخوانی اطلاعات وبلاگ شما را دارد و از آنجایی که داخل پرانتز مقدار “name“ را وارد کرده ایم ، پس این دستور صرفاً نام وبلاگتان را صدا می زند.
نکته۱: نامی که شما بعنوان عنوان وبلاگتان قرار دادید، در بخش مدیریت وردپرس قابل تنظیم و تغییر است.

نکته۲: چون bloginfo() یک دستور PHP هست بنابراین باید بین عبارت <?php و ?> قرار گیرد.

» <?php - شروع کدهای php
» bloginfo(’name’) - اطلاعات وبلاگتان را فراخوانی می کند البته در اینجا عنوان وبلاگتان، فراخوانی می شود.
» ; - سیمی کولون صدا زدن(فراخوانی) اطلاعات وبلاگ را متوقف می کند.
» ?> - پایان کدهای php

درصورتی که شما هرگونه تغییری در فایل index.php ایجاد کردید، آنرا save کنید و در آخر هم صفحه ی مرورگر وب را refresh کنید تا تغییرات را مشاهده نمایید.

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

اگر دقت کرده باشید عنوان وبلاگتان(blog’s title) قابل دیدن است، ولی قدرت لینک ندارد، یعنی قادر نیستم که بروی عنوان وبلاگ کلیک کنیم تا به صفحه ی اول سایت برویم.

برای فعال کردن لینک نوشته عنوان وبلاگ، باید از یک تگ XHTML کمک بگیریم. برای اینکار به فایل index.php بروید.

تگهای <a href=”#”> و </a> را به همان خط اضافه کنید. خط جدید شما بایستی به صورت زیر در بیاید:

<a href=”#”><?php bloginfo(’name’); ?></a>

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

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

عبارت <?php bloginfo(’url’); ?> در بین نقل قول (‘ ‘) دستور href= قرار دهید.

تغییرات را save کنید، الان باید خطی مانند زیر را داشته باشید:

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

برگردید به مرورگر و صفحه را refresh کنید، وقتی که بروی عنوان سایت بروید، Status bar باید به شما آدرس http://localhost/wordpress را به شما نشان می دهد(دلیل اینکه WordPress با رنگ قرمز مشخص شده است را دیگر نمی گویم).

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

از آنجایی که در صفحه ی اول قرار دارید با کلیک بروی عنوان وبلاگ نیز ، همان صفحه ی اول را مشاهده خواهید کرد. اما بدانید که یک تفاوت عظیم بین این دو عبارت # و http://localhost/wordpress وجود دارد. شما با این نکات، در درس های بعدی بیشتر آشنا خواهید شد.

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

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

» bloginfo(’url’)- اطلاعات وبلاگ شما را فراخوانی می کند. مخصوصاً در اینجا که آدرس یا URL صفحه ی اصلی تان را فراخوانی می کند.
» <a> - یک تگ از XHTML هست برای لینکدار کردن یک عبارت مخصوص (عبارتی که بین تگ های <a> و </a> قرار می گیرد)
» </a> - تگی است که امکان لینک دار شدن یک نوشته را می بندد . در صورت عدم استفاده از این تگ ، صفحه ی وب شما نمی داند که نوشته ای که لینکدار کرده اید کجا پایان می یابد و در این صورت یک لینک بزرگ خواهیم داشت، یعنی تمام نوشته های وبلاگ به یک آدرس لینک دار خواهند شد. همچنین قانون اول را بیاد بیاورد، هرچیزی را که باز کرده اید، باید ببندید.
» href=“” - این عبارت مخفف کلمه ی hypertext value هست. هر چیزی که در بین علامت نقل قول (” “) این دستور بعنوان مقدار قرار بگیرید، آدرس لینک ما خواهد بود.

توجه: شاید از خودتان بپرسید که چرا بجای عبارت bloginfo(’url’) ، آدرس http://localhost/wordpress را بعنوان مقدار href=” “ قرار ندادیم. دلیلش کاملاً واضح است، بدین خاطر که در صورتی که شما http://localhost/wordpress را بعنوان مقدار قرار دهید ، حتی اگر این پوسته بروی یک وب سایت قرار بگیرد. هنگامی که بروی عنوان وبلاگ آن سایت برویم ، بجای آوردن آدرس صفحه ی اصلی آن سایت، آدرس http://localhost/wordpress را به ما خواهد داد.

حال از این توضیحات بگذریم، خط کد شما به صورت زیر باید باشد:

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

یعنی: من با آوردن تگ <a> امکان لینک را آغاز کردم. سپس آدرس لینک را صفحه ی اصلی وبلاگم قرار دادم. برای اینکار من از تابع PHP یعنی bloginfo(’url’) استفاده کردم، تا آدرس و یا url وبلاگم را صدا بزنم. در آخر هم اسم لینک را با آوردن <?php bloginfo(’name’); همان عنوان وبلاگم قرار دادم. تگ لینک را نیز با عبارت </a> بستم.

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

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

مطالب مرتبط

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

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