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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

طراحی قالب وردپرس (فصل دوم - جلسه پنجم) : ایجاد صفحه مطلب

28006 ۱۱ آبان ۹۲

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

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

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

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

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

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

را قبل از تگ </head> (درون فایل header.php) و تابع

را قبل از تگ </body> قرار دهید. حال اگر قالب را ریفرش کنید، نوار مدیریت نیز نمایش داده خواهد شد.

آخرین کار ما با فایل index جدا کردن کدهای فوتر است برای انجام اینکار نیز یک فایل جدید در کنار index.php با نام footer.php ایجاد کنید و کد های فوتر را از فایل index به آن انتقال دهید

سپس بجای این کدها در فایل index کد زیر را برای لود کردن فایل footer.php قرار دهید:

خب حال نوبت به صفحه مطلب می رسد، یک فایل دیگر با نام single.php ایجاد کنید ، و کل کدهای فایل index.php را درون آن کپی کنید.

خب فایل single.php با فایل index.php فرق چندانی نخواهد داشت، بجز در قسمت content. این قسمت نیاز به تصویر شاخص و دکمه ادامه مطلب نخواهد داشت، درضمن برچسب ها و نظرات را نیز باید ایجاد کنیم.به علاوه اینکه به جای خلاصه مطلب بایستی کل مطلب را نمایش دهیم.

خب اولین کار بر روی ادامه مطلب پست "سلام دنیا" به دلیل داشتن نظر کلیک کنید.

حال به فایل single.php بر می گردیم و div با کلاس post را به شکل زیر تغییر دهید :

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

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

حال کل مطلب را با تابع زیر به جای خلاصه نمایش می دهیم :

خب اگر دقت کرده باشید، با اینکه تصویر بند انگشتی را حذف کرده ایم، اما هنوز متن به سمت چپ کشیده شده است و کل کادر را در بر نگرفته، پس باید تغییراتی در استایل ایجاد کنیم. برای اینکار کد زیر را به انتهای فایل style.css اضافه کنید :

خب کار بعدی نمایش برچسب های مطلب است برای اینکار کد زیر را خارج از div با کلاس single-post و قبل از endwhile قرار دهید :

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

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

کد زیر را نیز به انتهای فایل style.css اضافه کنید تا این قسمت بدون استایل نباشد.

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

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

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

استایل فوق از پوسته ی twentyten گرفته شده، و فقط مقداری اون رو ویرایش کردم.

خب تقریبا کار ما با فایل single تمام شد.

حال یک فایل جدید با نام page.php ایجاد کنید و کدهای فایل single.php را درون آن کپی کنید.

تنها تفاوتی که این فایل با فایل single.php  دارد قسمت برچسب هاست که نیازی به نمایش آن ها نداریم. برای همین فقط کدهای برچسب را از فایل page.php پاک کنید.

دانلود فایل های php قالب

 

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

 

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

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

 

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

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

  • ‏‏

    سلام خسته نباشید اگه بخواهیم تو صفحه single عکس، با اندازه واقعی یعنی اندازه اصلی خودش نشون داده بشه از چه کدی باید استفاده کنیم ؟ممنون

    • ‏‏
      سجاد دریس(۸ شهریور ۱۳۹۳)

      اگه اندازه دقیقش رو نمیدونید، height و width رو تعریف نکنید

  • ‏‏

    سلام یه سوال دارم اصلا چرا بیایم هر قسمت از قالب رو جداگانه طراحی کنیم مثلا header جدا footer جدا ؟ نمیشه همشو تو یک فایل بنویسیم ؟

    • ‏‏
      وحید صالحی(۲۶ شهریور ۱۳۹۳)

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

  • ‏‏

    یه سوال دیگه این دوره طراحی قالب وردپرس تموم شده یا هنوز مونده ؟ اگه مونده مطالب بعدی رو کی منتشر می کنید ؟

  • ‏‏

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

    • ‏‏
      وحید صالحی(۷ آبان ۱۳۹۳)

      مشکلی نیست فقط در فایال استایل هم همین نام ها رو باید قرار بدید

  • ‏‏

    بازم سلام
    یه مشکل دیگه اینکه من قالبم با قالبی که شما برای آموزش گذاشتین فرق میکنه وقتی تگ php بخش ابزارک ها رو مینویسم که توی فایلfunction نوشته میشه.بخش ابزارکم فعال نمیشه.و همچنین پیوندها.
    نمیدونم مشکل از چیه! آیا امکان داره به خاطر کلاس هایی باشه که توی صفحهindex.php تعریف کردم و نام کلاس ها با شما فرق میکنه؟
    ممنونم.خداخیرتون بده.

  • ‏‏
    عاطفه(۹ مهر ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۳۰ تیر ۱۳۹۵)

      سلام در مورد قسمت اول سوال باید بگم با استفاده از page template ها به راحتی می تونید هر نوع استایل و اسکریپت دلخواهی رو در سیستم اضافه کنید.در مورد قسمت دوم هم باید بگم بهتره با استفاده از WP_Query این کارو انجام بدین. می تونید مقدار posts_per_page رو برابر 12 قرار بدین و 12 تا آخر مطلب رو دریافت کنید.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram