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

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



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

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

26160 ۲۵ شهریور ۹۲

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

طبق روال آموزش، ابتدا فایل index را در ویرایشگر کد و قالب را نیز در مرورگر برای مشاهده نتیجه باز کنید.

از ستون کناری سمت راست شروع می کنیم : ابتدا گزینه های لیست، یعنی تگ های li را   از بلوک موضوعات و آخرین مطالب پاک کنید.

در وردپرس برای گرفتن لیست موضوعات سایت از تابعی به نام wp_list_categories استفاده می شود. حال شما نیز این تابع را درون تگ ul مربوط به بلوک موضوعات قرار دهید :

نتیجه کد در مرورگر :

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

حال به بخش مدیریت وردپرس رفته و چند دسته جدید ایجاد کنید (مسیر : نوشته ها > دسته ها).

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

Hide_empty دو مقدار 0 و 1 را می گیرد که 0 به معنای نمایش و 1 به معنای عدم نمایش، که مقدار پیشفرض نیز می باشد.

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

نکته :

کاراکتر & که در میان تنظیمات تابع قرار می دهیم، جهت جدا کردن گزینه ها از یک دیگر است

خب حال نوبت به آخرین مطالب می رسد، برای نمایش آخرین مطالب از تابع wp_get_archives استفاده می کنیم :

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

در تابع فوق تعیین کرده ایم که آرشیو از نوع پست به پست باشد، مقدار پیشفرض این گزینه مقدار monthly است، برای همین ابتدا آرشیو ماهانه را نشان داد. درضمن این گزینه مقادیر yearly , daily  و weekly که آرشیو سالانه هفتگی و روزانه را می توان نمایش داد.

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

Limit باعث خواهد شد که تعداد مطالب نمایش محدود شود که من در اینجا مقدار ان را 5 قرار داده ام ، تا فقط 5 مطلب اخیر نمایش داده شوند.

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

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

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

حال فایل را با اینکودینگ utf-8 ذخیره کرده و سپس به مدیریت وردپرس بروید، خواهید دید که بخش ابزارک ها نیز فعال شده است (مسیر : نمایش > ابزارک ها).

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

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

حال اگر قالب را ریفرش کنید می بینید که دیگر بلوک ها نمایش داده شده اند.

درضمن می توانید کدهای آخرین مطالب و موضوعات را پاک کرده، و آن ها را از طریق ابزارک ها اضافه کنید. به علاوه اینکه می توانید کدهای تبلیغات متنی را نیز با استفاده از ابزار متن به ستون اضافه کنید و کدهای آن را از فایل index.php پاک کنید :

بعد از اینکار تنها چیزی که از کدهای Right Sidebar در فایل index.php باقی مانده است کدهای زیر است :

حال یک فایل جدید با نام right-sidebar.php در کنار فایل index.php ایجاد کنید و کدهای فوق را از فایل index به آن انتقال دهید و بجای آن ها در فایل index کد زیر را قرار دهید تا فایل right-sidebar.php در فایل index.php لود شود :

حال نوبت به قسمت ستون کناری سمت چپ می رسد، ایتدا در فایل functions.php باید یک ستون دیگر ایجاد کرد که در بخش مدیریت نمایش داده شود :

کد فوق را بعد کدهای ستون سمت راست در داخل حلقه if قرار دهید، سپس به فایل index.php برگردید و کد زیر را قبل یا بعد از بلوک تبلیغات یا در کل هر جایی از ستون سمت چپ که خواستید برای نمایش ابزارها قرار دهید :

سپس کدهای بلوک پیوندها را کلا پاک کنید، چونکه ابتدا باید بخش مدیریت پیوندها را در وردپرس فعال کنیم، چونکه این قسمت به صورت پیشفرض غیرفعال است، و بعدا می توانیم پیوندها را از قسمت ابزارک ها به ستون اضافه کنیم.

خب برای این کار کد زیر را در فایل functions.php قبل از تگ ?> قرار دهید :

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

حال در فایل index.php از کدهای ستون سمت چپ فقط کدهای زیر باقی مانده است :

آن ها به یک فایل جدید با نام left-sidebar.php انتقال دهید و به جای آن ها کد زیر را در فایل index قرار دهید تا کدهای فایل left-sidebar.php در فایل index.php لود شوند.

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

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

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

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

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

  • ‏‏
    یاسر داودفر(۱۳ مهر ۱۳۹۲)

    با سلام . یاسر داودفر هستم از سایت yaspsd.ir
    واقعا آموزشاتون عالیه..
    مرسی.امیدوارم موفق باشین

  • ‏‏

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

  • ‏‏

    اقا سجاد واقعا دمت گرم 😯

  • ‏‏

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

  • ‏‏
    میلاد عابدی(۲۰ آبان ۱۳۹۲)

    با عرض سلام
    من ستون ها را ایجاد کرد. اما چیز هایی که داخل اون بلوک باید باشه بیرون اون نشون می ده علتش چیه 😐 😥

    • ‏‏
      سجاد دریس(۲۹ آبان ۱۳۹۲)

      کدهایی که بایستی درون فایل فانکشن قرار بگیرند رو درست نوشتین؟

  • ‏‏

    خیلی مفید بود..
    برای تابع wp_get_archives تنظیماتی وجود داره که بشه فقط مطالب (پست ها) اخیر یک دسته ی خاص رو نمایش بده؟
    اگه نداره لطف کن راهنمایی کن از کدوم تابع میتونم همچین کاری رو انجام بدم…تشکر

    • ‏‏
      سجاد دریس(۱۴ بهمن ۱۳۹۲)

      سلام.
      خیر با این تابع نمیشه.
      برای اینکار میتونید از تابع get_posts استفاده کنید.
      به طور مثال :

  • ‏‏

    سلام خسته نباشید
    سوالم در مورد sidebar widget area تو function هست. تو خط 9 یک دیو باز شده که تو 15 هم بسته شده که کل ویدجت رو نگه میداره. اما اون دیو دیگه که تو خط 13 باز و 15 بسته شده واسه چیه؟

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

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

  • ‏‏

    درود
    من وقتی این تغیرات را اعمال می کنم برای تمام پوسته هایی که دارم اعمال میشود!!!
    مشکلم از کجاست؟؟

    • ‏‏
      سجاد دریس(۴ خرداد ۱۳۹۳)

      یعنی شما یه تغییر توی یک قالب انجام میدین، رو همه ی قالب ها اعمال میشه؟!!
      چنین چیزی غیر ممکنه دوست عزیز!

  • ‏‏

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

  • ‏‏
    محمد اصلاحی(۲۹ مرداد ۱۳۹۳)

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram