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

‏  5 دقیقه
۱۶ شهریور ۱۳۹۲
طراحی قالب وردپرس (فصل دوم – جلسه دوم) : ساخت سرصفحه ی پوسته

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

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

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

<body <?php body_class(); ?>>

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

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

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

<div id="logo">
<h1><?php bloginfo('name'); ?></h1>
</div>

<div id="tagline">
<h2><?php bloginfo('description'); ?></h2>
</div>

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

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

<ul id="menu">
<li><a href="<?php bloginfo('home'); ?>"></a></li>
<?php wp_list_pages(‘title_li=’); ?>
</ul>

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

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

نکته :

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

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

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

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

<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>

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

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

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

<?php get_header(); ?>

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نیاز به لاگین

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

نظرات کاربران

حسین

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

Abbas412

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

سجاد دریس

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

hajian1

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

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

سجاد دریس

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

دارکوب

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

serda

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

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

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

hajian1

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

علی

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

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

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

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

mojhdeh

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

محمد رمضانی

سلام دوست عزیز
من یک سالی میشه که دارم از این اموزش میبینم و مطالبش بسیار عالیه و نظرات بیشتر کاربران رو میخونم و شما فکر میکنم اولین نفری هستید که دارین میگید سایت سون لرن مشکل داره ، و من فکر میکنم این کاری که شما دارین میکنید یه جور تخریبه
با این سایت خیلی ها طراح وب سایت و … شدن و مطالب بسیار مفیدی ارائه میده و شما هم دست از تخریب بردارین تا بذارید این سایت به فعالیت خودش ادامه بده

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

شما چه مطلبی رو جستجو کردین که سایت ما بی ربط و بیخود نسبت به اون مطلب،لینکی رو برای شما توی گوگل نشون داده؟مطمئن باشید اگه سایت ما توی گوگل نتایجی رو نشون میده،براش هم محتوایی داره و بیخود و الکی مطلب رو نشون نمیده،ما به کیفیت کارمون اهمیت میدیم چون به کاربرامون اهمیت میدیم.ما که مثل سایت های تبلیغاتی و آگهی نیستیم که برای هر مطلبی ایندکس شده باشیم،ما روی یه مبحث تمرکز کردیم و اوم طراحی وبه،حالا توی شاخه های مختلفش هم داریم آموزش میدیم،اگرم گوگل ایندکس میکنه مطمئن باشید بیخود نیست چون روش کار کردیم.مطمئن باشید مطلب الکی و بیخود نداریم.

mojhdeh

لطفا مقایسه کنیدکه چطور در پایان اموزش دموی اموزشی قرار داده شده تا کاربر بتونه نتیجه کار رو تشخیص بده و یه مثال دیگه شما در گوگل اموزش طراحی سایت با asp.net رو سرچ بزن متوجه میشی سایت شما بدون ارائه هیچ اموزشی در این زمینه بیخودی در نتیجه جستجوی گوگل پیدا میشه :
لطفا خودتان مقایسه کنین :
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
http://learning.asarayan.com/education-website-design/design-with-html-and-css/344-sweet-honey-in-photoshop-web-design-tutorial3.html
البته این فقط دو مورده اما مواردی از این دست زیادن که شما در برابر اموزشهای انها اصلا از سطح اموزشی برخوردار نیستین
خواهش من اینه همینی که شروع به اموزش کردین خودش خیلی خوبه اما حداقلی رو در سطح اموزشی رعایت کنین نه فقط در معرفی سایت از هر گزینه ای استفاده و وقت کار بر رو هدر بدین
با تشکر

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

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

moghdeh

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

حدود 4 روزه دارم بدنبال اموزش طراحی سایت با asp.net سرچ میزنم اما مرتب سایت شما رو جزء 10 نتیجه اولیه نشون میده که هیچ ربطی به جمله سرچ شده نداره و شدین مثل سایتهای تبلیغاتی که این بیشتر باعث میشه تا کاربران بلاک کنن بعنوان یه سایت تبلیغاتی
امیدکه هر چه زودتر ترتیب اثر بدین حالا که دارین زحمت میکشین واموزش میدین
موفق باشید

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

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

سجاد دریس

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

سجاد دریس

لطف داری دوست عزیز.
مطالب سر موقع منتشر میشن.