سلام دوستان عزیز.

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

1- سعی کنید کدهارو تمیز بنویسید

2- درج توضیحات یادتون نره. این باعث میشه که اگر بعدا خواستی قسمت رو ادیت کنید راحت پیداش کنید

3- صبور باشید و سعی کنید کدهارو خودتون تایپ کنید نه اینکه کپی کنید. ( البته اگر میخواهید یاد بگیرید )

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

آموزش طراحی قالب وردپرس – قدم سوم

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

خب یک پوسته استاندارد و ساده وردپرس شامل فایل های زیر هستش:

header.php

footer.php

index.php

search.php

page.php

category.php

single.php

archive.php

comments.php

با همین فایل ها میتونیم یک پوسته وردپرس استاندارد و ساده بسازیم.

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

در ابتدا در مسیری که وردپرس رو نصب کردید wp-content/themes یک فولدر به نام newtheme بسازید

خب حالا این 4 فایل رو که میگمو بسازید داخل فولدر تم

index.php – footer.php – header.php – style.css

برای شناخته شدن پوسته توسط وردپرس این فایل هارو باید داشته باشیم

ساخت فایل header.php

میخواهیم بدونیم که چه کدهایی داخل فایل header.php قرار میگیره:

کدهای META , LINK

عنوان سایت

اسکریپت ها و بخش هایی برای فراخوانی لوگو و منو

حالا فایل header.php رو که ساختیم در حالت ادیت باز کرده و کدهای زیر را داخل آن قرار دهید:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
   <head>
<title><?php bloginfo( 'name' ); ?></title>
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="profile" href="http://gmpg.org/xfn/11">
      <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
      <?php endif; ?>
      <?php wp_head(); ?>
   </head>

همونطور که میبینید یک سری تگ meta و link داخل تگ head قرار دارند. همینطور یک تگ title وجود دارد که توابعی در آن است

تابع: wp_title() عنوان را بر می گرداند. توضیحات بیشتر در اینجا

تابع bloginfo(): مقدار بازگشتی بستگی به مقدار داخل پرانتز داره. یه جورایی اطلاعات درباره سایت بر میگردونه. اطلاعات بیشتر در اینجا

بعدشم که یک شرط گذاشتیم که اگر داخل صفحات دیگر بود شماره صفحه رو هم چاپ کنه

این از این

حالا فایل رو سیو کنید و به بخش پوسته ها بروید. میبینید که پوسته رو نشون نمیده.

حالا چیکار کنیم که این قالب در لیست پوسته ها بیاد

یک فایل به نام index.php بسازید و کد زیر را داخل آن قرار بدید

<?php get_header();?>

الان کدهای مربوط به index رو نمیگم.

حالا فایل style.css رو در حالت ادیت باز کرده و سپس کدهای زیر را داخل آن قرار داده و ذخیره کنید.

/*
Theme Name: پوسته جدید
Theme URI: http://wpschool.ir
Author: Elnaz
Author URI: http://wpschool.ir
Description: این پوسته برای یادگیری طراحی قالب وردپرس ساخته شده است
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

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

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

حتما می پرسید که به چه دردی میخوره؟؟

وردپرس با کدهای بالا میتونه بفهمه که اسم تم ، نویسنده توضیحات و …. چیه. این اطلاعات در قسمت جزئیات پوسته نمایش داده میشه

1

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

حالا فایل footer.php رو در حالت ادیت باز کنید و کد زیر رو داخلش قرار دهید:

<?php the_footer();?>
</html>

کار تابع the_footer() این هستش که فایل های css و js رو داخل صفحه include کنه. البته کار ما با فایل فوتر تموم نشده و در ادامه تکمیلش خواهیم کرد.

خب فکر کنم برای امروز کافی باشه

اگر سوالی داشتید تو دیدگاه بپرسید

موفق باشید

 

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

آموزش طراحی قالب وردپرس – قدم دوم: راه اندازه لوکال هاست و نصب وردپرس

آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش دوم

آموزش طراحی قالب وردپرس – قدم چهارم: کار با حلقه ها

آموزش طراحی قالب وردپرس – قدم پنجم: طراحی سایدبار

آموزش طراحی قالب وردپرس – قدم ششم : فرم جستجو

آموزش طراحی قالب وردپرس – قدم هفتم بخش 1: ساخت فایل single.php

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

آموزش طراحی قالب وردپرس – قدم هفتم بخش 3: ساخت بخش دیدگاه ها

20 دیدگاه برای “آموزش طراحی قالب وردپرس – قدم سوم

  • سیروس
    - ۱۱ بهمن , ۱۳۹۳

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

  • ارش
    - ۱۹ بهمن , ۱۳۹۳

    با سلام خیلی ممنون که آموزش رو شروع کردید خیلی ممنون که توضیح هم داره
    اگه امکانش هم هست که تا حد حرفه ای پیش برید مثلا منو سفارشی والکر و فالبک منو و خیلی چیزهای دیگه مثلا افزونه نویسی
    خیلی بهتر میشه که پست هات قابلیت فایل pdf هم اضافه کنی با تشکر از سایت خوبتون

  • ارش
    - ۲۰ بهمن , ۱۳۹۳

    با سلام
    ممنون می شم که هر خط رو توضیح کامل بدین که قابل فهم باشه
    بازم تشکر

  • rita
    - ۱ اردیبهشت , ۱۳۹۴

    سلام منظور از در ابتدا در مسیری که وردپرس رو نصب کردید wp-content/themes یک فولدر به نام newtheme بسازید کدوم مسیر؟

    خب حالا این ۴ فایل رو که میگمو بسازید داخل فولدر تم

    index.php – header.php – style.css – functions.php
    واضح تر توضیح بدید لطفا

    • الناز
      - ۲ اردیبهشت , ۱۳۹۴

      سلام دوست عزیز. وقتی وردپرس رو نصب کنید داخل اون فولدری به نام wp-content و داخل wp-content هم فولدری به نام themes برای قرار دادن پوسته ها وجود داره. اونجا باید بسازید.

      • رویا
        - ۹ فروردین , ۱۳۹۵

        خب دقیقا از کدوم قسمت باید وارد شیم؟ اصلا محتویات پوشه وردپرس رو پیدا نمیکنم

        • الناز
          - ۱۶ فروردین , ۱۳۹۵

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

  • سحر
    - ۳۱ تیر , ۱۳۹۴

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

    • الناز
      - ۵ مرداد , ۱۳۹۴

      سلام دوست عزیز. همون فایل Index.php رو باز کنید و کدهارو داخلش قرار بدید

  • سیا
    - ۱۳ شهریور , ۱۳۹۴

    سلام الناز جونم
    از اینکه میبینم اینطور راحت داری اموزش میدی که به درد امثال من میخوره خیلی خوشحالم

    خیلیییی با حالیییییییییی

  • عرفان
    - ۲۹ شهریور , ۱۳۹۴

    سلام الناز خانوم بسیار عالی بود مطالبتون

    • الناز
      - ۶ دی , ۱۳۹۴

      ممنون .خواهش میکنم

  • alireza
    - ۳۰ بهمن , ۱۳۹۴

    ا عرض سلام و خسته نباشید یه سوال داشتم تو سایت hamyarwp .com یه اسکریپ یا یک هیدر هست که ضبدر داره یعنی میشه ببندیش در شروع قالب بالای سایت واقعا ممنون میشم بگین چطوری میشه با چه کدی یا افزونه میشه اون کارو کرد ممنون

    • الناز
      - ۳ اسفند , ۱۳۹۴

      سلام دوست عزیز. در واقع اون یک div هستش با یک کلاس مشخص و توسط جی کوئری زمانی که سایت باز میشه نشون داده میشه و وقتی هم که روی علامت ضربدر کلیک میشه باز هم با جی کوئری بسته میشه. نمونه کدش زیاده مثل لینک های زیر
      http://jsfiddle.net/HbGM2
      http://papermashup.com/simple-jquery-showhide-div

  • HaSaN
    - ۱۵ اسفند , ۱۳۹۴

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

    • الناز
      - ۲۱ فروردین , ۱۳۹۵

      سلام. با چه نرم افزاری کار می کنید؟ UTF-8 رو فراموش نکنید

  • امین
    - ۲۴ اسفند , ۱۳۹۴

    سلام
    به من همچین پیغامی میده!!
    «پوسته‌های زیر راه‌اندازی شده‌اند ولی ناقص هستند. پوسته‌ها باید یک شیوه‌نامه و یک قالب داشته باشند.»
    چکار کنم

    • الناز
      - ۱۶ فروردین , ۱۳۹۵

      سلام. خب باید فایل index.php و style.css به همراه کدهای معرفی تم در فایل style.css

  • جواد
    - ۱۶ اردیبهشت , ۱۳۹۵

    سلام . دستتون درد نکنه من از مطالب سایتتون واسه راه اندازی سایتم استفاده کردم.

  • arezoo
    - ۲۷ آذر , ۱۳۹۷

    با سلام آمورش عالی هست ولی من مراحل رو انجام دادم ولی در آخر نوار ادمین اضافه نمیشه

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --