چگونه برای وردپرس پوسته بسازیم؟(بخش ۲۱ و پایانی)

قالب دهی نظرات

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

wp-php-theme

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

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

در ابتدا باید بگویم که روش ساختن بخش نظرات به دوشکل ممکن است، یک- حالت پیش فرض وردپرس، که با تایپ فقط یک خط کد امکانش میسر می شود. دو- روشی که ما نظرات را با نظر و سلیقه ی خود، درون فایلی بنام 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

تابع 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 محصور شده اند.
» وقتی شما مطلبی را با پسورد منتشر می کنید، بخش نظرات شما نیز همچنین بوسیله ی پسورد محافظت می شوند.

password-protected

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

comments-template-core

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

comments-template-simple

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

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

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

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

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


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

معرفی نویسنده


وبلاگنویس، طراح وب سایت و علاقه مند به مباحث IT ...

۶۶ نظر برای این مطلب

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

  2. دستت درد نکنه خیلی عالی بود. من همه‌ی صفحاتی رو که توشون آموزش طراحی سایت دادی رو سیو کردم و مطالعه می کنم. الان جلسه‌ی ۱۰م هستم .خیلی عالی بود. دستت درد نکنه. خدا خیرت بده!
    پیروز باشی

  3. دمت گرم ولی من نخوندم :D

  4. سلام
    سایت خوبی دارید من از سایتتان خوشم امد
    اگر تمایل به تبادل لینک دارید
    من رابا نام سایت موبایل لینک کن
    وبعد در سایتم در قسمت نظرات به من اطلاع بده
    که من شما را با چه نامی لیک کنم
    با تشکر

  5. لطفا تمامی بخش ها را در قالب pdf قرار دهید

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

  7. دوست عزیز شما لطف داری ، منتها من می خوام که یکسری تغییرات هم بهش بدم ولی باز هم ممنون که گفتی….

  8. واقعا خسته نباشین عالی بود…
    سوالی داشتم:
    من دارم سایت فوتوگالری طراحی میکنم.
    آیا میشه طوری طراحی کرد که وقتی کاربر روی یک عکس کلیک کرد به صفحه جدید بره طوری که کانتنت سایت تغییر کنه ولی فوتر و هدر ثابت بمونن یعنی لارم نباشه که هدر و فوتر دوباره لود بشه.آیا میشه با CSS همچین کاری کرد؟
    امیدوارم منظورمو متوجه شده باشین

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

  10. در ضمن . اگر قالب سایتتون رو طوری تغییر بدید که اول مطالب و بعد سایدبار لود بشه برای وقتهایی که سرعت خیلی پایینه (در ایران = همیشه) بهتره !!!

  11. شدنش که میشه حامد جان منتها با سی اس اس نمیشه باید با Ajax این کارو کرد…

  12. والا امین جان برای وقتی که دو سایدبار هست این امکان وجود نداره و باید اول حداقل یکی از سایدبارها لود بشه….

  13. خیلی جالب بود

  14. سلام

    با تشکر از سایت خوبتون

    درخواست :

    ۱- لطفا آموزش استفاده از برنامه Almeza MultiSet رو قرار بدید

    ۲- راهی رو آموزش بدبد که بشه با استفاده از اون یک برنامه مدیریت دانلود رو برای چند بار open نمود

  15. درود،
    آقا من منتظر PDF هستم :D

  16. خب ساید بار سمت راست سنگینه . احتمالا به خاطر کد گوگل یا شمارنده و رنکینگ باشه .

  17. اگه همه ی بخش ها رو به صورت یه فایل میکردی خیلی بهتر بود تا بقیه بتونن دانلودش کنن مثلا PDF
    یه مورد دیگه اینکه من از چه کدی استفاده کنم که وقتی روی قسمت نظرات کلیک میشه یه پنجره جدید باز بشه
    یعنی یه اسکریپت جاوا میخواد مثل بلاگفا
    جواب بدی ممنون میشم

  18. والا دوست عزیز این حالت رو زیاد آشنا نیستم، باید کمی تحقیق کنم….

  19. سلام

    آقا خسته نباشید

    اگه میشه pdf این اموزش ساخت قالب رو هم بزارید

    خیلی ممنون میشم اگه گذاشتید منم خبر کنید

    راستی شما قالب هم طراحی میکنید؟

  20. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۲۱ و پایانی) Add to del.icio.us […]

  21. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۲۱ و پایانی) […]

  22. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۲۱ و پایانی) […]

  23. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۲۱ و پایانی) […]

  24. چشم بزودی می گذارم…
    بله طراحی هم می کنم….

  25. سلام
    مطلبتون بدک نبود تشکر میکنم ولیی کامل نیست دقیق تر بنویس

  26. سلام.

    دستت درد نکنه زحمت کشیدی آموزش گذاشتی ولی من دنبال یه چیزی بودم پیدا نکردم ! کدی که باهاش میشه بر چسب ها رو توی پست نمایش داد چیه ؟

    ممنون میشم واسم ایمیل کنی.

    یا علی.

  27. خیلی آسونه ولی نمی گم که خودت بری بگردی…………… به نفعته جوون…

  28. واقعا باید تبریک گفت که آموزش ساخت قالب وورد پر رو آموزش دادید . اونم در ۲۱جلسه فکر کنم صورت مسئله رو بلند کردید تا مسئله طولانی بشه . طراحی قالب وورد پرس رو میشه در ۳ یا ۴ جلسه توضیح داد . موفق باشید طراحان وورد پرس فارسی

  29. ما خیلی خیلی مدیون این سری آموزشهاییم
    آقا مهدی من می خواستم برای نظر ها قالبی تو مایه های همین قالب نظرات شمارو داشته باشم، یعنی برای هر کس پاسخش هم توی همون نظر نوشته بشه، هر موقع وقت داشتین یه کوچول راهنماییم می کنین؟
    ممنون میشم…

  30. پیمان جان کار خاصی نداره پلاگین زیر رو دانلود و نصب کن …
    Wordpress Thread Comment
    بصورت خودکار این امکان به بخش نظراتت اضافه میشه
    از لینک زیر می تونی دانلود کنی
    http://blog.2i2j.com/plugins/wordpress-thread-comment
    به همین راحتی به همین خوشمزگی…..

  31. سلام دوست عزیز ممنون از مطالب مفیدتان

  32. […] چگونه برای وردپرس پوسته بسازیم؟(بخش ۲۱ و پایانی) […]

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

  34. ببخشد منظورم پست (post) بود ، اشتباه تایپ کردم

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

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

  37. وقتی روی لوکال قالبها رو امتحان میکنم این مشکل وجود نداره ولی وقتی تو هاست up میکنم قالبها مشکل پیدا میکنه

  38. امکان داره که این مشکل به هاستم ربط داشته باشه البته این مشکل ها جدیدا پیدا شده مثلا اسکریپت فروشگا رو به هاستم اضافه کردم و اون اسکریپت هم قسمت هدش به یه طرف تمایل داره البته اینم تو اکسپلورر اینجوری میشه هر دو مشکلی که گفتم تو موزیلا موردی ندارند در ضمن نسخه های php my sql و همه این ها هم از مال لوکالم ورژنش بالاتره با این وجود رو لوکال که امتحان میکنم این مشکل ها رو ندارم موقعه انتشار این مشکلات به وجود میاد

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

  40. از چه برنامه ای استفاده می کنی؟

  41. والا باید بررسی کنی نریمان جان ولی فکر نکنم که به ورژن پی اچ پی و یا اس کیو ال بستگی داشته باشه…
    باید بررسیش کنی
    ولی سعی کن که از برنامه ی Xampp استفاده کنی…

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

  43. والا سعید جان احتمالاً‌ در فایل function.php دستورات مربوط به سایدبار رو وارد نکردید و همچنین ممکنه که در فایلهای مربوط به سایدبار کد مربوط به سایدبار رو وارد نکرده باشی….

  44. واقعا عالی بود . خیلی چیزهارو یاد گرفتم مخصوصا css رو. حالا می تونم خودم یک قالب بسازم D:
    خیلی ممنون ….

  45. سلام
    ممنونم از آموزشاتون.
    من چهطور باید کاری کنم که پاسخدهی به نطرات برای کاربران فراهم شود؟ که هرکسی خواست جواب کس دیگری رو در نظرات بده بتونه جوابشو دقیقا در زیر همون نظر ثبت کنه؟
    امیدوارم که منظورم رو فهمیده باشید.
    لطفا جوابم رو به ایمیلم ارسال کنید.
    با تشکر

  46. دوست عزیز برای اینکار از پلاگین WordPress Thread Comment استفاده کن

  47. سلام با تشکر میشه لطف کنید نسخه پی دی اف این سری آموزش ها رو هم بذارید؟

  48. گذاشتم کورش جان
    کمی بگرد

  49. مهدی جان گشتم ولی پیدا نکردم . میشه لینکشو بدی؟
    راستی اگه میشه آیدی یاهوتو هم بده یا این آیدی رو اد کن kpasargad2@yahoo.com

  50. لینکش اینه
    http://www.p30help.ir/how-to-make-wordpress-theme-pdf/
    توی صفحه ی تماس با ما آی دیم گذاشته

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

  52. دمت گرم پسر
    خیلی وقت بود که می خواستم دوباره وارد دنیای CMS بشم (از ۸۳ تا الان کنار کذاشته بودم) ولی مجال این کار رو نداشتم . شاید باورت نشه ولی وقتی فایل PDF اموزش تمت رو امروز صبح ساعت ۹ از بچه ها گرفتم ، تا همین الان داشتم می خوندمش و تمومش کردم.
    اموزشت بدون مشکل و قدم به قدم اجرا شد. اولین اموزش فارسی دیدم که بدون مشکل تونست کارمو راه بندازه. یادمه قدیم ترا اکثر اموزش ها مشکل داشت یا کامل نبود یا بعد چند روز کا نیمه تموم می موند و …
    در هر حال خوشمان آمد ، امیدوارم همیشه موفق باشی و بتونی آموزش های دیگه ای رو هم به ایرانی های عزیزمون بدی تا ایران ما چینی نشه !!!.

  53. :) ممنون دوست عزیز

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

  55. سلام
    لطفا بهم کمک کنییییییییییییییدددد!!!!!
    قسمت نوار ابزار “نوشتن” در وردپرس من غیره فعاله؟؟؟!!!
    یعنی هنگام نوشتن پستهام فقط با HTML میتونم بنویسم
    چون قسمت “دیداری” که شامل فونتها , رنگها وپاراگرافها و…….
    است اصلا وجود ندارد!!!(یا دیده نمیشن)
    لطفا من رو راهنماییی کنید ..باید چیکار کنم؟

  56. با سلام خدمت همه بازدید کننده ها.من یه راه حل برای مشکل دیر بالا اومدن ساید بار دارم.راه حلش فقط CSS
    با CSS میتونیم با رنگ ها مثل یه عکس شکل دربیاریم و سریع هم قالب بالا میاد.برای اینترنت اکسپلور از رده خارج هم با اندازه H1 اون بالای قالب میزنیم برای مشاهده واضح سایت و بدلیل مشکل های CSS در اینترنت اکسپلور مرورگر فایرفاکس رو نصب کنید.این جوری اونایی که با سرعت های اینترنت خیلی کم هستند میتونن سایت شما رو واضح و کامل ببینن.از ما گفتن بود :D

  57. ممنونم و امیدوارم همواره موفق باشید

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

  59. در مورد rtl.css صحبت نکردید ؟!!

  60. میثم جان در درس بعدی نحوه ی فارسی کردن پوسته های وردپرس رو گفتم

  61. الحق و والانصاف دستت درس داداش… کلی حال دادی… ۱ روزه همه ی درسا رو خوندم از بس ردیف بود دمت گرم بازم ممنون بابت زحمتی که کشیدی خدا خیرت بده

  62. آقا دمت گرم
    خیلی آموزش مفیدی ایجاد کردی.ممنون

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

  64. سلام داداش
    خیلی خیلی حال دادی…
    دمت گرم

  65. موفق باشید ممنون

  66. خیلی عالیه

یک نظر بگذارید