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

- 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=’ را پاک کنید.

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

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

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

امین

سلام خسته نباشید خیلی عالی بود شما بهترینید

Hasan Mohajerani

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

لقمان آوند

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

Hossein Mahdavi

با سلام
من میخوام قالبی رو بری فروش در مارکتهای جهانی بسازم که کاربر امکان انتخاب بخشهای مختلف سایت مثلا header , footer رو داشته باشه. در واقع در قالب چند header چند sidebar و … وجود داره که نمایش هر کدوم از اونها بستگی به انتخاب کاربر داره. آیا چنین امکانی در این دوره آموزش داده میشه
با تشکر

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.