سلام دوستان عزیز.
از امروز شروع به کدنویسی می کنیم. اما من قبلش یه سری نکات رو میگم بهتون. نکاتی که در کدنویسی باید رعایت بشه
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 */
فکر میکنم متوجه کدهای بالا شدید. میتونید مقادیر رو متاسب با پوسته خودتون عوض کنید
نام تم، نام نویسنده، لینک نویسنده و …. رو در بالا قرار دهید
حتما می پرسید که به چه دردی میخوره؟؟
وردپرس با کدهای بالا میتونه بفهمه که اسم تم ، نویسنده توضیحات و …. چیه. این اطلاعات در قسمت جزئیات پوسته نمایش داده میشه
البته اگر کدهای استایل رو هم نزارید اتفاق خاصی نمی افته فقط توضیحات تم رو نشون نمیده
حالا فایل footer.php رو در حالت ادیت باز کنید و کد زیر رو داخلش قرار دهید:
<?php the_footer();?> </html>
کار تابع the_footer() این هستش که فایل های css و js رو داخل صفحه include کنه. البته کار ما با فایل فوتر تموم نشده و در ادامه تکمیلش خواهیم کرد.
خب فکر کنم برای امروز کافی باشه
اگر سوالی داشتید تو دیدگاه بپرسید
موفق باشید
آموزش طراحی قالب وردپرس – قدم اول : دانلود نرم افزار های مورد نیاز
آموزش طراحی قالب وردپرس – قدم دوم: راه اندازه لوکال هاست و نصب وردپرس
آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش دوم
آموزش طراحی قالب وردپرس – قدم چهارم: کار با حلقه ها
آموزش طراحی قالب وردپرس – قدم پنجم: طراحی سایدبار
آموزش طراحی قالب وردپرس – قدم ششم : فرم جستجو
آموزش طراحی قالب وردپرس – قدم هفتم بخش 1: ساخت فایل single.php
آموزش طراحی قالب وردپرس – قدم هفتم بخش 2: ساخت باکس درباره نویسنده
آموزش طراحی قالب وردپرس – قدم هفتم بخش 3: ساخت بخش دیدگاه ها
ممنون بابت اموزش مفیدی که زحمت کشیدید و اماده کردید بی صبرانه منتظر قسمت های بعدی هستیم
با سلام خیلی ممنون که آموزش رو شروع کردید خیلی ممنون که توضیح هم داره
اگه امکانش هم هست که تا حد حرفه ای پیش برید مثلا منو سفارشی والکر و فالبک منو و خیلی چیزهای دیگه مثلا افزونه نویسی
خیلی بهتر میشه که پست هات قابلیت فایل pdf هم اضافه کنی با تشکر از سایت خوبتون
با سلام
ممنون می شم که هر خط رو توضیح کامل بدین که قابل فهم باشه
بازم تشکر
سلام منظور از در ابتدا در مسیری که وردپرس رو نصب کردید wp-content/themes یک فولدر به نام newtheme بسازید کدوم مسیر؟
خب حالا این ۴ فایل رو که میگمو بسازید داخل فولدر تم
index.php – header.php – style.css – functions.php
واضح تر توضیح بدید لطفا
سلام دوست عزیز. وقتی وردپرس رو نصب کنید داخل اون فولدری به نام wp-content و داخل wp-content هم فولدری به نام themes برای قرار دادن پوسته ها وجود داره. اونجا باید بسازید.
خب دقیقا از کدوم قسمت باید وارد شیم؟ اصلا محتویات پوشه وردپرس رو پیدا نمیکنم
سلام دوست عزیز. لطفا تمامی مراحل را با دقت بخونید.
سلام
گفتین که یک فایل به نام index.php بسازید و کد زیر را داخل آن قرار بدید
یه index.php داشتیم،حالا اینو دقیقا کجا بسازیم
سلام دوست عزیز. همون فایل Index.php رو باز کنید و کدهارو داخلش قرار بدید
سلام الناز جونم
از اینکه میبینم اینطور راحت داری اموزش میدی که به درد امثال من میخوره خیلی خوشحالم
خیلیییی با حالیییییییییی
سلام الناز خانوم بسیار عالی بود مطالبتون
ممنون .خواهش میکنم
ا عرض سلام و خسته نباشید یه سوال داشتم تو سایت hamyarwp .com یه اسکریپ یا یک هیدر هست که ضبدر داره یعنی میشه ببندیش در شروع قالب بالای سایت واقعا ممنون میشم بگین چطوری میشه با چه کدی یا افزونه میشه اون کارو کرد ممنون
سلام دوست عزیز. در واقع اون یک div هستش با یک کلاس مشخص و توسط جی کوئری زمانی که سایت باز میشه نشون داده میشه و وقتی هم که روی علامت ضربدر کلیک میشه باز هم با جی کوئری بسته میشه. نمونه کدش زیاده مثل لینک های زیر
http://jsfiddle.net/HbGM2
http://papermashup.com/simple-jquery-showhide-div
سلام با تشکر از مطلب مفیدتون
من فایل css رو ایجاد کردم و موارده بالا را داخلش کپی کردم ولی حروف فارسی رو به صورت علامت سوال نشون میده لطفا راهنمایی کنین ممنون
سلام. با چه نرم افزاری کار می کنید؟ UTF-8 رو فراموش نکنید
سلام
به من همچین پیغامی میده!!
«پوستههای زیر راهاندازی شدهاند ولی ناقص هستند. پوستهها باید یک شیوهنامه و یک قالب داشته باشند.»
چکار کنم
سلام. خب باید فایل index.php و style.css به همراه کدهای معرفی تم در فایل style.css
سلام . دستتون درد نکنه من از مطالب سایتتون واسه راه اندازی سایتم استفاده کردم.
با سلام آمورش عالی هست ولی من مراحل رو انجام دادم ولی در آخر نوار ادمین اضافه نمیشه
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس