• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

طراحی قالب وردپرس (فصل دوم – جلسه چهارم) : ساخت قسمت مطالب

28247 ۲۲ مهر ۹۲

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

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

ابتدا فایل index.php را در ویرایشگر کد و قالب را در مرورگر باز کنید :

خب شروع می کنیم :

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

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

سپس کد زیر در فایل index.php در قسمت content قرار دهید :

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

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

خب حال به وردپرس می گوییم اگر پستی در دیتابیس پیدا شد، ابتدا برای آن یک div با کلاس post ایجاد کن

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

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

می بینید که به تعداد پست هایمان (من دو پست ایجاد کردم) div با کلاس post ایجاد شده، و به هر یک از divها یک id داده شده است. خب ادامه می دهیم، حال باید عنوان پست ها را چاپ کنیم (با توجه ساختار قبلی که برای پست ها ایجاد کرده بودیم) پس کد را به شکل زیر توسعه می دهیم :

تابع the_permalink لینک مطلب را چاپ می کند که ما آن را در مقدار href استفاده کرده ایم، تابع the_title نیز عنوان مطلب را چاپ می کند.

حال اگر قالب را در مرورگر ریفرش کنید، باید عناوین پست ها چاپ شده باشند :

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

بعد از عنوان مطلب ، ساختار زیر را برای نمایش مطلب و تصویر بند انگشتی  داشتیم  :

ابتدا تگ p و متنش را حذف کنید تا متن مطلب را با تابع وردپرس بگیریم.

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

در صورتی که ما فقط چند خط اول پست یا همان خلاصه را می خواهیم چاپ کنیم. تابع the_excerpt  در وردپرس این کار را برای ما انجام خواهد داد و فقط تقریبا 250 کاراکتر ابتدای متن پست را برایمان چاپ خواهد کرد. پس تابع the_excerept(); را جایگزین تابع the_content(); کنید.

نتیجه :

(من متن پست "سلام دنیا" را برای بهتر دیدن نتیجه طولانی کردم)

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

خب حال نوبت به تصویر بند انگشتی می رسد در حالت عادی پوسته ما از تصاویر بند انگشتی پشتیبانی نمی کند. و تصویر همه مطالب همین تصویر پیشفرض خواهد بود. برای فعال کردن این قابلیت ابتدا باید کد زیر را درون فایل functions.php و قبل از تگ ?> قرار دهید :

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

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

در حلقه فوق شرط گذاشتیم که اگر مطلب دارای تصویر شاخص بود آن را نمایش بده در غیر اینصورت همان تصویر پیشفرض "بدون تصویر بند انگشتی" را نمایش بده، اگر مرورگر را ریفرش کنید خواهید دید که تصویر بند اگشتی مورد نظرمان نمایش داده شده است، اما!  تصویر در اندازه ی واقعی خود نمایش داده شده است در صورتی که تصویر باید در اندازه ی 150 * 150 نمایش داده شود تا بهم ریختگی ایجاد نکند. برای اینکه تصویر بند انگشتی را به این اندازه تغییر دهیم دوباره به فایل functions.php رفته و کد فعال سازی قابلیت تصویر شاخص را به شکل زیر توسعه دهید :

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

در کد فوق تایین کردیم که اندازه ی تصویر شاخص اندازه ای باشد که thumb-size در فایل functions.php دارد که همان 150 * 150 است.

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

اما هنوز این قسمت مشکل دارد! تصویر شاخصی که ما قرار داده ایم، دارای کلاس post-thumb و استایل مخصوص به خود است اما این تصویر شاخص فاقد این کلاس است (اگر سورس را ببنید متوجه می شوید) پس چگونه همان استایل post-thumb را به آن اختصاص داده و آن را در مکان مناسب قرار دهیم؟!

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

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

برای اینکار فایل style.css را باز کنید و کد زیر را پیدا کنید :

سپس آن را به شکل زیر تغییر دهید :

حال دیگر کارمان با تصویر شاخص نیز تمام شد، و نوبت ادامه مطلب می رسد. به فایل index.php بر گردید و کد ادامه مطلب را به شکل زیر تغییر دهید :

همانطور که قبلا هم گفتیم تابع the_permalink لینک نوشته را چاپ می کند.

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

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

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

برای صفت href نیز باید لینک مطالب این نویسنده را قرار داد، برای اینکار نیز از تابع زیر استفاده می کنیم :

کار بعدی گرفتن تاریخ انتشار نوشته است، برای این کار از تابع the_date استفاده می کنیم :

با اینکه اینکار تاریخ انتشار نوشته را چاپ خواهد اما فرمت تاریخ میلادی است در صورتی که تاریخی که ما میخواهیم شمسی است، برای اینکه فرمت زمان را به شمسی چاپ کنیم نیازمند افزونه ی wp_jalali داریم، این افزونه به صورت پیشفرض همراه با وردپرس فارسی منتشر می شود. و فقط کافیست آن را فعال کنید. برای فعال کردن افزونه ، در بخش مدیریت وردپرس مسیر افزونه ها > افزونه های نصب شده، بر روی لینک فعال کردن زیر نام wp-jalali کلیک تا افزونه فعال شود :

حال اگر قالب را ریفرش کنید، می بینید که ساعت انتشار مطلب چاپ شده است؟!! پس باید تغییراتی در تابع the_date بدهیم. برای اینکار آن را به شکل زیر تغییر دهید تا تاریخ را چاپ کند.

حال باید تاریخ مطلب به صورت صحیح نمایش داده شود.

کار بعدی تعداد نظرات مطلب است که فقط کافیست تابع زیر را جایگزین تگ a کنید

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

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

خب به نظر! می رسد کار ما با پست ها به پایان رسیده و صفحه index ما آماده شده، پس خسته نباشید. در جلسه بعدی فایل single و page را ایجاد خواهیم کرد.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 65 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام
    من طبق این آموزش پیش رفتم اما یه مشکلی هست. چرا متنی ک قرار میدم کنار تصویر شاخص نیست بلکه زیر تصویر شاخص قرار میگیره؟ 😕 در تصاویری ک شما برای آموزش گذاشتین متن کنار تصویر بندانگشتی قرارگرفته. اشکال کار من کجا میتونه باشه؟ لطفا راهنمایی بفرمایید.
    یه مساله دیگه هم هست. من میخوام تو صفحه جدیدی ک ساختم مطالب مربوط به یک دسته خاص رو نشون بده اما همه دسته ها رو تو صفحه نشون میده. :sad: این کد رو هم نوشتم ک از ایدی استفاده میکنه اما جواب نداد
    لطفا کمکم کنید
    باسپاس

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram