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



visibility  
mode_comment   ۳۰

در جلسه قبلی توانستیم که کدهای 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()  نیز لیست برگه ها نمایش داده خواهد شد.

info نکته :

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

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

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

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

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

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

comment دیدگاه کاربران
علی

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

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

کیوان علی محمدی

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

hajian1

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

serda

سلام،وقتتون بخیر!
یه سوال در رابطه با ومپ سرور داشتم:
وقتی که 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

hajian1

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

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

سجاد دریس

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

Abbas412

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

سجاد دریس

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

حسین

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

ارسال نظرات

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

1 2