• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

29766 ۱۳ شهریور ۹۲

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 44 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۲۹ آذر ۱۳۹۲)

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

  • ‏‏
    بهرام(۱۴ بهمن ۱۳۹۲)

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

    • ‏‏
      سجاد دریس(۱۴ بهمن ۱۳۹۲)

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۲۸ فروردین ۱۳۹۳)

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

      • ‏‏

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

        • ‏‏
          سجاد دریس(۳۰ فروردین ۱۳۹۳)

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

    • ‏‏
      کیوان علی محمدی(۲۸ فروردین ۱۳۹۳)

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

      • ‏‏

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

        • ‏‏
          کیوان علی محمدی(۳۰ فروردین ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۵ اردیبهشت ۱۳۹۳)

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

      • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۵ اردیبهشت ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۵ اردیبهشت ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۲۴ خرداد ۱۳۹۳)

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

  • ‏‏

    با سلام

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

    • ‏‏
      لقمان آوند(۲۴ تیر ۱۳۹۳)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram