آموزش طراحی قالب وردپرس #۵ت
۱۲ اردیبهشت ۸۸
سلام
اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.
اگه یک نگاه کلی به کل کارهایی که انجام دادیم بندازیم میفهمیم که یک if داریم به معنی: “اگر برقرار باشد” منظورم خط زیر است:
<?PHP if(have_posts()): while(have_posts()):the_post();?>
که اگر پست داشته باشیم کد زیرش رو میخونه اما اگر نداشته باشیم چی!؟
یعنی مثلا ما هیچ پستی ننوشتیم یا در اون زمینه ای که بازدید کننده دنبالش میگرده ننوشتیم!
خوب برای فهماندن جمله ی: “اگر شرط برقرار نبود” به php کد زیر رو بلافاصله بعد از endwhile مینویسیم:
<?php else : ?>
<div class=”post”>
<h2><?php _e(‘Not Found’); ?></h2>
</div>
باید فهمیده باشین چی شد
ما در واقع یک صفحه ی خطا ساختیم که اگر پست مورد نظر پیدا نشد نوشته ی Not Found به معنای “پیدا نشد” نمایش داده میشه و همونطور که قبلا هم گفتم میتونیم هرچیزی جایگزین این جمله بکنیم!
مثلا من میرم به آدرس زیر و با پیغام خطا مواجه میشم:
http://localhost/wordpress/?cat=789
چون من در دسته بندی هام مثلا ۱۰ تا موضوع دارم نه ۷۸۹ تا! و چون جایی رفتم که وجود نداره با این پیغام که “پیدا نشد” مواجه میشم! این رو هم اضافه کنم که اگه این کد رو نمینوشتیم اتفاقی نمی افتاد فقط Not Found نمایش داده نمیشد! همین!
پس فهمیدیم که while با endwhile بسته شد و if با else که عکس اون عمل میکنه ادامه یافت!:
توضیح:قرمز ها تابع، و همرنگ ها مربوط به همند.
حالا در مورد پست ها!
وقتی نگاهی به source سایتمون بکنیم میفهمیم که تمام پستها با یک کلاس (post) شناخته شده اند!
اما هر پست برای خودش پستیه!! و یک آی دی یا شناسه میخواد که اون رو از بقیه پست ها متمایز کنه!
برای اینکه به پست هامون یک آی دی مناسب بدیم به صورت زیردر کنار کلاس post :
id=”post-<?php the_ID(); ?>”
یک خط کد مینویسیم، تابع the_ID تابعی است که کارش اینه که به هر مطلب یک شماره ی منحصر به خودش رو میده
حالا بعد از ذخیره کار میریم و با گوگل کروم که گفتم دانلود کنید و یا با فایرفاکس و افزونه مورد نظر ما (که اسمش رو یادم نبود و الان هست!) یعنی افزونه ی Firebug سایت رو باز میکنیم:
در کروم با کلیک راست روی قسمتی از صفحه (مثلا هدر) و کلیک بر روی آخرین گزینه (Inspect element) صفحه ای باز میشه که سورس رو بسیار واضح و عالی مرتب کرده و بر روی هر قسمت کد که بریم اون قسمت با رنگ زرد در صفحه مشخص میشه و ما می فهمیم هر کد مربوط به کدام قسمت است!
مثل عکس میبینیم که به هر پست یک آی دی منحصر به خودش داده شده که اون رو از بقیه جدا میکنه!
عکس زیر رو باز کنید (به علت حجم نسبتا زیاد باید روی عکس کلیک کنید و ذغالی ها هم صبور باشید لطفن!!)
در فایر فاکس هم Firebug دقیقن (شایدم تقریبن) همین کار رو انجام میده که میتونین ازش استفاده کنید.
اگه نمیتونین اعداد رو ببینین یا ساختار شکل من با شما فرق داره میتونین عکس زیر رو ببینین و اشکالات احتمالی رو رفع کنین!
تصویر کدهای نوشته شده تا امروز
این هم از این!
حالا برین به صفحه سایت و روی یکی از عناوین پست ها موس رو نگه دارین!
میبینین که چیزی نمی نویسه، برای اینکه مثلا همون عنوان رو هم بنویسه میتونیم از title استفاده کنیم که دقیقا مثل href برای تگ a ، عنوان یا title هم یکی از ویژگی هاست که میشه به این تگ نسبت داد،پس کد عنوان ما به این صورت میشه:
<a href=” <?PHP the_permalink() ?>” title=”<?PHP the_title() ?>”>
<?PHP the_title() ?>
</a>
من title رو با استفاده از تابع ()the_title فراخوانی کردم، با ذخیره و refresh کردن میفهمیم که چه تغییری پیش اومد.
حالا اگه با inspect element یا حتی دیدن source سایت قسمت عنوان یکی از پست ها رو پیدا کنیم میبینیم که title هم اضافه شده بهشون!
اینکار شاید برای ما و حتی بازدید کننده ها سودی نداشته باشه اما برای روبوت ها ی سایتهای مختلف که سایت مارو اسکن میکنن میتونه مفید باشه! که بفهمن title ما چیه و از این حرفا!
میدونیم که در ورد پرس مثل بقیه سرویسهای وبلاگ یک حد اکثری برای نوشته ها هست یعنی مثلا در وبلاگ من بیشترین تعداد مطالب ۵ عدد است! که البته از قسمت مدیریت میشه اون رو تغییر داد!
حالا اگه ما تعداد مطالبمون زیادتر باشه چی؟
حتما به دکمه ای نیاز داریم که مارو به صفحات دیگه ببره یعنی مثلا صفحاتی که هر کدوم ۵ پست دارن!
در درس بعدی یاد میگیریم دو کلید “بعدی” و “قبلی” در انتهای وبلاگ قرار بدیم.
فعلن بابای
