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

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



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

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

28157 ۱۶ شهریور ۹۲

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

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

در وردپرس تابعی به نام body_class() وجود دارد، کار این تابع تعیین class هایی برای تگ body است، به طور مثال اگر پوسته فارسی بود، این تابع کلاس rtl را به تگ body می دهد، اگر در صفحه اصلی بودیم کلاس home ، اگر در سایت لاگین کرده بودیم کلاس logged-in و ... ، به طور عادی چنین چیزی اتفاق نخواهد افتاد و حتما از تابع در تگ body باید استفاده کنیم پس کد body را به شکل زیر تغییر دهید :

اگر فایل را ذخیره و سورس را نگاه کنید، جتما چنین نتیجه ای خواهید دید :

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

چند خط پایین تر به کدهای logo و tagline می رسیم که باید عنوان و توضیح سایت را با استفاده از توابع وردپرس بگیریم و درون تگ های h1 و h2 چاپ کنیم. به کد های زیر دقت کنید :

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

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

تابع bloginfo با مقدار home آدرس صفحه اصلی را چاپ خواهد کرد، که ما از آن برای href لینک صفحه اصلی استفاده کرده ایم

با استفاده از تابع wp_list_pages()  نیز لیست برگه ها نمایش داده خواهد شد.

نکته :

اگر دقت کنید یک مقدار نیز به تابع wp_list_pages داده ایم. دلیل آن، این است که وردپرس به صورت پیشفرض کلمه "برگه  ها" (در وردپرس انگلیسی pages) را قبل از نمایش لیست برگه ها اضافه می کند. اما ما به این کلمه نیاز نداریم. برای برداشتن آن title_li را با مقدار هیچ! قرار داده ایم تا از نمایش این کلمه صرفنظر شود برای دیدن حالت پیشفرض ‘title_li=’ را پاک کنید.

در ضمن می توانید  به بخش مدیریت رفته و چند برگه جدید ایجاد کنید تا در لیست منوی سایت ما نمایش داده شوند.

 خب، توانستیم لیست برگه را نمایش دهیم، اما هنوز کار ما با منو تمام نشده است، اگر چند برگه دیگر ایجاد کرده باشید.

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

بسیار خب حال کاری که باید انجام دهیم، جدا کردن کدهای قسمت هدر ، و قرار دادن آن ها در یک فایل مجزاست، برای اینکار یک فایل جدید با نام header.php در کنار فایل index.php ایجاد کنید، سپس کدها را از خط اول یعنی doctype تا توضیح <!-- End Header --> از فایل index.php به فایل header.php منتقل کنید

سپس فایل header.php را با اینکودینگ utf-8 ذخیره کنید.

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

این تابع کدهای فایل header.php را در به فایل index.php اضافه خواهد کرد. اگر کار فوق را بدرستی انجام داده باشید، پس از ریفرش مجدد مرورگر قالب به حالت عادی خود بازخواهد گشت. اما در اینجا یک سوال به وجود خواهد آمد که دلیل این کار چیست و چه فایده ای دارد؟ در وردپرس بعضی از صفحات وجود دارند که کلیّت مشابهی دارند و فقط در بخش محتوا با هم دیگر فرق دارند، به طور مثال اگر قالب سون لرن را در نظر بگیرید، هدر و فوتر و سایدبار در همه صفحات از جمله صفحه اصلی، صفحه ادامه مطلب، و برگه ها، به یک شکل است. از طرف دیگر برای این صفحاتی که نام بردیم، هر کدام باید یک فایل ایجاد کنیم، که اگر یادتان باشید برای ادامه مطلب صفحه single.php و برای برگه ها صفحه page.php، خب در این حالت وقتی که هدر هر سه صفحه یعنی index.php ,single.php و page.php مانند هم است، برای جلوگیری از کدنویسی مجدد، کدهای هدر را در یک فایل مجزا قرار دادیم، تا در هنگام ایجاد ما بقی صفحات فقط فایل header را include کنیم. و از بالا رفتن حجم فایل نیز جلوگیری کرده ایم. مزیت دیگر این است که اگر خواستیم تغییری در هدر قالب ایجاد کنیم، فقط کافیست فایل header.php را ویرایش کنیم. و این تغییر در index , page و single اتفاق خواهد افتاد.

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

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

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

  • ‏‏

    سلام من آموزش های طراحی قالب شمارو دنبال میکنم خیلی عالی هستن
    من یه سوال داشتم اگه بخوایم فقط اطلاعاتی از پست ها توی صفحه اصلی سایت نمایش داده بشه مثل این سایت http://www.pnusoal.ir

    باید چی کار کرد؟؟ لطفا راهنمایی کنید باید چی کار کنم همشو طراحی کردم فقط وقتی میخوام روی لینک توضیحات وخرید کلیک کنم میخوام بره به متن اون پست …..

    • ‏‏
      کیوان علی محمدی(۲۹ شهریور ۱۳۹۲)

      سلام خوب توی جدول پست ها یه فیلد خلاصه یذارید و خلاصه ای اط مطلب رو داخلش بذارید بعدش توی صفحه اصلی مقدار اون فیلد رو نمایش بدید.

  • ‏‏

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

  • ‏‏

    سلام،وقتتون بخیر!
    یه سوال در رابطه با ومپ سرور داشتم:
    وقتی که local host را در مرورگر اجرا میکنم در قسمت YourProject فولدر wordpress وجود نداره.
    چطوری میشه این فولدر را دید و این مسئله را حل کرد؟
    ممنون.

    • ‏‏
      کیوان علی محمدی(۲۵ شهریور ۱۳۹۲)

      سلام اگه تمام فایل های نصب وردپرس رو ریختید توی این فولدر wordpress و اینم توی پوشه www باشه مسلما باید وجود داشته باشه.

  • ‏‏
    دارکوب(۹ مهر ۱۳۹۲)

    4 قالب ساز رایگان وردپرس
    ادامه مطلب سایت:
    http://sitedesign.joomir.com/%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3/item/729-4-%D9%82%D8%A7%D9%84%D8%A8-%D8%B3%D8%A7%D8%B2-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3.html

  • ‏‏

    سلام
    وقتیکدهای
    <a href="”>

    رااضافه کردم
    درمنوی زیرهدرقالب نوشته(برگه نمونه)نمایان شددراین موردلطفاًتوضیح بیشتری بدهید

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

      سلام. این کد برگه های ایجاد شده رو نمایش میده، برگه نمونه یک برگه پیشفرض هست که هنگام نصب وردپرس ایجاد میشه.

  • ‏‏

    سلام
    یه سوال
    چرا وقتی کد های header رو به فایل جدید انتقال دادم و تابع get_header(); رو هم اضافه میکنم، بعد از رفرش، هدر دقیقا 15 پیکسل از بالای مرورگر فاصله میگیره (در واقع کل wrapper این فاصله رو میگیره و جابجا میشه)
    ممنون

    • ‏‏
      سجاد دریس(۲۸ فروردین ۱۳۹۳)

      سلام.
      مربوط به نوار مدیریت هست، وقتی که لاگین باشید، این اتفاق میوفته.
      البته چونکه الان نوار فراخوانی نشده اینجوریه. وقتی از تابع wp_head() در قسمت head صفحه و از تابع wp_footer() قبل از تگ body بسته استفاده کنید. نوار مدیریت هم ظاهر خواهد شد.

  • ‏‏

    با سلام و تشکر از اموزش خوبتون
    اگه بخوام صفحه اول با بقیه صفحات کاملا متفاوت باشه باید چیکار کنم؟
    یه چیز شبیه این سایت
    http://www.behsazenergy.net/
    ممنون

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram