campaign-edianeh-98

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



visibility  
mode_comment   ۴۴

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

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

حال باید پوسته فعال قالب، که همان mytheme هست برای شما نمایش داده شود.

خب به سراغ فایل index.php می رویم :

در دومین خط از فایل زبان صفحه را تعیین کرده ایم، در وردپرس تابعی به نام language_attributes وجود دارد که به طور داینامیک اطلاعات زبان صفحه و direction آن را چاپ می کند. پس ما کلمه lang=”fa” را حذف کرده و این تابع را جایگزین می کنیم.

حال اگر فایل را ذخیره کنید، و مرورگر را ریفرش کرده و سورس آن را ببنید متوجه خواهید شد که زبان صفحه و direction آن چاپ شده است.

در خط چهارم charset صفحه را به صورت دستی تعیین کردیم، اما تابع bloginfo در وردپرس، همین کار را نیز برای ما انجام خواهد داد.

پس کد زیر را نیز بجای خط چهارم جایگزین کنید

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

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

مرحله بعدی قرار دادن قرار دادن یک meta tag با مقدار توضیح سایت در head صفحه است که برای موتورهای جستجو مفید خواهد بود. برای این کار کد زیر را در head صفحه بعد title قرار دهید

کار بعدی متصل کردن فایل style هست، پس بایستی href آن را تغییر دهیم، اما اینکار به صورت دستی انجام پذیر نیست، و باید از تابع وردپرس مخصوص آن استفاده کرد پس آدرسی که برای فایل style نوشتیم را پاک کرده و مقدار زیر را جایگزین آن کنید :

پس از قرار دادن کد فوق، صفحه را در مرورگر ریفرش کرده تا نتیجه را ببنید، حتما متوجه شده اید که هیچ تصویری در قالب نمایش داده نشده است، پس حال باید مشکل آدرس تصاویر را نیز حل کنیم. پس فایل style.css را در ویرایشگر کد باز کنید :

ابتدا از فونت ها شروع می کنیم و آدرس آن ها را به صورت زیر تغییر می دهیم :

چونکه فونت ها درون پوشه css قرار دارند، قبل از نام آن ها کلمه css/ را اضافه کرده ایم، (البته می تونید نام فولدر رو به fonts نیز تغییر دهید).

پس از این کار هر کجای قالب که از تصویر استفاده کرده ایم (../) را از آدرس پاک کنید مثلا برای body آدرس به شکل زیر تغییر خواهد کرد.

برای مابقی تصاویر نیز همین کار را انجام دهید تا همه تصاویر به درستی لود شوند.

اگر به درستی اینکار را انجام داده اید فقط تصاویر بندانگشتی، تبلیغات، و اطلاعات پست، تصاویرشان لود نشده است ، آن هم به این دلیل است که آدرس آن ها در فایل index قرار دارد. پس دوباره به فایل index.php بر می گردیم

در وردپرس تابعی به نام :

که آدرس پوسته را چاپ می کند. ما باید این تابع را در هر جا که از تگ img استفاده کردیم در قبل از آدرس قرار دهیم تا آدرس تصویر کامل شود. از تصاویر بند انگشتی شروع می کنیم

دقت کنید که حتما بعد از تابع یک / قرار دهید. بقیه تصاویر را نیز به همین صورت لود کنید.

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

باز به head صفحه بر می گردیم و کدهای زیر را پس از لینک style قرار می دهیم :

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

کد کامل head :

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

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

واقعا خیلی شفاف توضیح دادید… موفق باشید 😳

hajian1

سلام
دوخط ازکدهایی که دیریم ویورخطاگرفته لطفاًبررسی نمایید
باتشکر
ن مطالب ‘ % >/ “>? 😉 ( ytheme’ ,( wp_specialchars( get_bloginfo(‘name’), 1
<link rel="alternate" type="appliction/rss+xml" href="”
title=”<?php

سجاد دریس

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

محمدرضا

عالی بود. فقط چند تا نکته رو توضىح بدىن.
ىکى اون %s
و. یکی. هم فکر کنم دو تا اندرلاین بوده یا نه که در خطوط اخرین نظرات به کار برده شده. ___

hajian1

سلام
کد کامل headکه درسایت قرارداده ایدکاملاًدرست است
من ازکدضمیمه pdfسایت استفاده کرده بودم شایددرکدضمیمه pdfسایت اشتباهی رخ داده باشد
ومن شخصاًاز شمااستادگرامی عذرخواهی میکنم
موفق وسلامت باشید
باتشکر

silent knight

ممنون خیلی خیلی چاکرتونم
البته امتحانش نکردم ولی مطمئنم همش درسته
دمتون گرم

Abdul ghafor

واقعا جالب بود. دمتون گرم. خدا کند بقیه بخش رو هم زود زود آماد کنین. ممنون

علی امینی

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

علی امینی

سطر دوم کامنت تصحیح شد !
من کد قسمت title صفحرو گذاشتم ولی کار نمیکنه .!

سجاد دریس

سلام.
این امر به دلیل نبود فایل single هست، این فایل رو که ایجاد کردیم، این مشکل حل میشه.

علی امینی

فایل single چی هست و کی ایجادش میکنیم؟؟؟

سجاد دریس

درجلسات آتی با این فایل آشنا خواهید شد.

محمد رمضانی

سلام
کد صفحات داخلی این theme رو از کجا باید بگیریم؟
تشکر

سجاد دریس

سلام. در اولین جلسه کدهای html این قالب برای دانلود قرار گرفته

محمد رمضانی

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

P.Behravesh

سلام آقای دریس. ممنون از شما اما در این کامنت روی سخنم با آقای آونده 🙂
یه عرضی داشتم. اینکه بنده وقتی وارد پیشخوان اعضا میشم ، اون پایین نوشته وردپرس 3.3.1 . لطفا وردپرستون رو آپدیت کنید خوب 😐 به دلایل امنیتی عرض میکنم! البته نمیدونم اشکال ازا ون صفحه ست یا … 😐

طراحی قالب وردپرس

توی طراحی قالب این بخش خیلی خیلی مهمه و میتونه تاثیر زیادی تو سئو سایتمون بزاره.
خسته نباشید

md5

سلام ببخشید اون global برای چیه؟:???:

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

سلام global برای دریافت متغییر های هست که قبلا تعریف شده.

بهرام

سلام
از زمانی که پوسته سایت رو به وردپرس منتقل کردم و تو وردپرس فعالش کردم هیچ استایلی نداره و ریخته بهم. چیکار کنم؟ اما وقتی همینجوری قالب رو با مثلا کروم باز میکنم درسته.

سجاد دریس

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

hamed_z2001

باسلام … کار تابع language_attribues چیه؟؟؟ من این تابع رو نوشتم اما هیچ فرقی نکرد و طبق متن که گفته بود دایرکشن و زبان رو چاپ میکنه کار نکرد 🙁

سجاد دریس

مطئنید به درستی از تابع استفاده کردین؟

hamed_z2001

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

سجاد دریس

سلام خب همین دیگه. توی متن مطلب هم گفتم direction و lang تگ html رو تعیین میکنه.
وردپرسی که نصب کردید فارسی باشه direction رو rtl و lang رو fa اگرم انگلیسی بود direction رو ltr و lang رو en قرار میده.

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

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

hamed_z2001

کیوان میشه بیشتر توضیح بدی ؟؟؟
آخه وقتی استفاده میکنم بالت ها و … (چون اول قالب بهم ریختس بالت ها رو نشون میده) راست چینه اما اگه نذارم چپ چین میشه.کار این تابع چیه؟؟از کجا میفهمه که باید فارسی باشه یا انگلیسی؟؟؟

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

خوب بله شما باید اینو ست کنی اما وقتی پوسته ما فارسی هست حتما نیازی نیست از این تابع استفاده کنیم.این تابع بر اساس زبان وردپرس اون کدهای لازم رو چاپ میکنه.ولی وقتی میدونم دایرکشن من rtl زوبان هم fa-IR هستش نیازی نیست یه کوئری به دیتابیس بزنم تا اینو دریافت کنم و نشون بدم.

بهرام

سلام خسته نباشید
اسم فایل استایل حتما باید style.css باشه؟ و حتما باید کنار فایل index باشه؟ توی آموزش واسه این حالت گفتین که فایل استایل style.css هست و جاش هم کنار فایل index تو پوسته های خود وردپرس هم که نگا کردم اینجوریه، حالا اگه اسم و آدرس فایلمون فرق کنه میشه یا نه؟ اگه میشه لطفا دستورش رو واسه مثال قرار بدید. ممنون

سجاد دریس

سلام.
بله، باید نام فایل style و درکنار فایل های php باشه، استاندارد قالب های wordpress اینجوریه، و اگه غیر از این حالت باشه، بعضا وردپرس پوسته رو به عنوان پوسته ی خراب، در نظر می گیره.

بهرام

واسه همه فایل های css اینجوریه یا فقط فایل استایل اصلی چون من یک فایل css دیگه هم دارم که ماله اسلایدر هست. اونم باید منتقل بشه؟

سجاد دریس

فقط فایل style اصلی.

بهرام

در مورد حذف /.. از اول آدرس فایل های فونت و تصاویر تو فایل css هم وقتی /.. رو حذف میکنم IDE خطا میگیره. اشکال نداره؟ طبیعیه؟

سجاد دریس

خب بعد از برداشتنون تصاویر نمایان شد؟ اگه آره مشکلی نیست.

بهرام

با تشکر واسه پاسخ هایی که دادین. یه سوال دیگه، چون سایت من تجاریه نمیخوام قسمت دیدگاه ها یا همون نظرات داشته باشه و احتیاجی بهش نیست تو این قسمت که گفتین “در کدهای بالا ما ابتدا ویژگی نظردهی توسط کاربران سایت را فعال کردیم و همچنین rss مطالب و نظرات و بازخوردها را ایجاد کردیم.” کدوم قسمت رو باید حذف کنم که rss مطالب باشه اما نظرات و بازخورد ها و… نباشه دیگه. خودم خوب نفهمیدم شرمنده

سجاد دریس

خط های شماره 1و5و7

بهرام

فایل جاوا اسکریپت رو به این صورت اضافه کردم اشتباه؟ چون کار نمیکنه 🙁
<script src="js/script.js”>

سجاد دریس

کدتون رو در انجمن ارسال کنید

بهرام

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

سجاد دریس

خیر روش دیگه ای نیست، باید به همین صورت عمل کنه.
بین آدرس فایل ها و تابع bloginfo یک / قرار دادین؟

WEBIG

سلام
ممنون از تمام زحماتتون
فق یکم واسم تعجبه ! قبل از این سری آموزشی به شکل دیگری بود . یعنی همین سری آموزشی طراحی قالب وردپرس به شکل دیگری بود . فایل psdی هم در کار بود . نمی دونم اشتباه می کنم یا نه ولی این شکلی نبود ! فکر کنم تغیر دادید 😉
در کل دمت کتری

سجاد دریس

سلام.
اون سری آموزشی طراحی قالب html هست، که ابتدا psd رو هم طراحی کردیم.

Shahoo

با سلام

برای css از تابع bloginfo(‘rss2_url’); استفاده می کنیم برای آدرس دهی جاوا اسکریپت از چه تابعی باید استفاده کنیم؟؟

لقمان آوند

متوجه منظورتون نشدم . واضح تر بیان کنید .

ارسال نظرات

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