campaign-edianeh-98

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



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 اتفاق خواهد افتاد.

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

متخصص PHP
اگر دوست داری برنامه نویسی PHP رو حرفه ای یاد بگیری آیا می دانید بیش از ۸۰% وب سایت های موجود در ایران از جمله لیدرهای بازار وب (اسنپ، اسنپ فود، نت برگ، دیجیکالا، الوپیک و ... ) زبان برنامه نویسی PHP را به عنوان زبان اصلی برای پیاده سازی امکانات سمت سرور خود انتخاب کردند! متخصص PHP arrow_back
comment دیدگاه کاربران
محمدرضا

عالی .لطفا ادامه بدید

7leran.C0M

سلام سجاد جان واقعا عالی بود میشه ادرس سایت شخصیتون رو بزارید؟ممنونم 😳

سجاد دریس

سلام
سایت شخصی ندارم.

hajian1

سلام
ضمن تشکردرآموزش یادآورشدیدکه همهی Liهاراحذف کنیم غیرازLiی صفحه اصلی
باعنایت به اینکه من درمنوهای زیرهدرمنوی آبشاری ایجادکرده ام وغیرازمنوی صفحه اصلی بقیه منوهای زیرهدررابرای هرمنوی زیرهدر7زیرمنوتعریف کرده ام
بنابراین حذف Liهاشامل Liهای منوهای آبشاری هم می شود؟
باتشکرفراوان

سجاد دریس

سلام.
همه ی liها رو حذف کنید

hajian1

سلام
من برای1-آموزش ها2-همکاری3-تبلیغات4-تماس با من5-درباره من6-نقشه سایت
برای هرکدام نام اختصاصی تغیرداده ام
وبرای هرمنو7زیرمنوتعریف کرده ام
وقتیliهای زیرمنوهاراحذف می کنم وازکدهایphpاستفاده می کنم زیرمنوهادرسایت نمایش داده نمیشوند
لطفاًراهنمایی نمایید
درضمن زیرمنوهارادرفایل cssباmenu2نام گذاری شده است
درضمن آبشاری کردن منوهای یادشده راباراهنمایی استادصالحی انجام داده ام
باتشکر

سجاد دریس

سلام.
خب وقتی برگه ی جدیدی ایجاد می کنید، برای اون از قسمت صفات برگه یک “مادر” انتخاب کنید تا به شکل زیر منو نمایش داده شود.

hajian1

سلام
درضمن فایل کامل رابه صورت زیپ درانجمن قسمت phpجهت راهنمایی نیزارسال نموده ام
باسپاس

Abdul ghafor

خیلی خیلی خیلی خیلی عالی!!!!!!!!!!!! ممنون… دوباره میگم اگه میشه قسمت های بعدی رو هم در دسترس مون قرار بدین. میرسی.

سجاد دریس

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

hajian1

سلام
درفایلhtmlزیرمنوهابخوبی نمایش داده می شوندامادراین درس که بهphpتبدیل می شوندوقتیliهاراحذف می کنیم زیرمنوهانمایش داده نمی شوند
باتشکر

سجاد دریس

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

moghdeh

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

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

mojhdeh

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

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

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

محمد رمضانی

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

علی

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

ارسال نظرات

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