×

آموزش ساخت قالب وردپرس

آموزش, قالب وردپرس Jafarkhan 04 فروردین 1400

آموزش ساخت قالب وردپرس

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

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

ساخت قالب وردپرس

گام اول: یک برنامه ویرایشگر کد نصب کنید

برای مدیریت آسان کدها نیاز به یک برنامه ویرایشگر کد داریم. پیشنهاد ما ++Notepad

گام دوم: ایجاد فایل برای ذخیره محتویات افزونه جدید وردپرس

ابتدا برنامه وردپرس خود را بروزرسانی کنید و پوشه public_html هاست را باز کنید.

ایجاد فایل در قالب وردپرس

پوشه‌ای که ما بیشتر با آن سر و کار داریم، پوشه wp-content است. داخل این پوشه، پوشه دیگری به نام themes وجود دارد که تمامی قالب‌هایی که بخواهید روی سایت خود نصب کنید، در این پوشه قرار گرفته‌اند. وردپرس به صورت پیش فرض 3 قالب در این پوشه قرار داده است که ما نیازی به آن‌ها نداریم. در پوشه themes، یک پوشه جدید بسازید و نام دلخواهی روی آن بگذارید؛ این نام، اسم قالب شما خواهد بود. ما نام customtheme را انتخاب کردیم.

نام قالب برای وردپرس

گام سوم: ایجاد فایل style.css و index.php

در پوشه customtheme  دوفایل style.css و index.php را بسازید.

فایل style.css و index.php در پوشه وردپرس

style.css: یک فایل ضروری است که در آن تنظیمات ظاهر قالب قرار میگیرد. در مثال زیر، نام قالب، نام سازنده، آدرس سازنده و نسخه قالب را قرار داده‌ایم. شما هم قطعه کد زیر را در فایل style.css قرار دهید.

______________________________________________________________________________________________________________________________________________

/*
theme name:customtheme
author: rtl-theme
author url: htps://rtl-theme.com
version: 1.0
*/
_____________________________________________________________________________________________________________________

Index.php: در این فایل کدی را قرار می‌دهیم که نشان دهیم قالب اختصاصی وردپرس ما، به خوبی کار می‌کند. قطعه کد زیر را در این فایل قرار دهید و تغییرات را ذخیره کنید.

______________________________________________________________________________________________________________________________________________

<h1>custom theme!</h1>
______________________________________________________________________________________________________________________________________________

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

گام چهارم: قالب خود را از پیشخوان وردپرس فعال کنید

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

نمایش افزونه جدید در پیشخوان وردپرس

گام پنجم: اضافه کردن کدهای نمایش عنوان و نوشته پست‌ها

همان طور که می دانید می توانیم مقاله و عکس به وب سایت خود اضافه کنیم که این مقاله ها در پایگاه داده ذخیره می شوند و ما باید آن را فراخوانی کنیم.برای اضافه کردن عنوان و متن مقاله باید از حلقه وردپرس استفاده کرد.شاید برایتان سوال باشد که حلقه وردپرس چیست؟در واقع کدهایی هستند که شرط های while وردپرس را اجرا میکنند. با استفاده از همین حلقه، توسعه دهندگان وردپرس می‌توانند مقاله‌ها را در هر صفحه‌ای که بخواهند نمایش دهند. تمام این کارها با قطعه کد PHP زیر انجام می‌شود:

______________________________________________________________________________________________________________________________________________

<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php endwhile; else :echo'there are no posts'; endif;?>
______________________________________________________________________________________________________________________________________________

در بهترین حالت این حلقه از دو تابع ()have_posts و ()the_post.استفاده می‌کند؛ تابع ()have_post نیز بررسی می‌کند که آیا پستی برای نمایش وجود دارد یا خیر. پاسخ آن true یا false است که اگر true باشد، پست‌هایی برای نمایش وجود دارد و برعکس. تابع ()the_post پاسخی ندارد و فقط وردپرس را برای نمایش پست‌ها آماده می‌کند. با کد بالا چیزی در سایت شما نمایش داده نخواهد شد و فقط کد اولیه است. اکنون باید قطعه کد زیر را در فایل index.php خود قرار دهید. کدی که قبلا در این فایل نوشتید را نیز پاک کنید و کد جدید را جایگزین کنید.

______________________________________________________________________________________________________________________________________________

<?php if (have_posts()) : while (have_posts()) : the_post();?>


<h2><?php the_title() ?></h2>


<?php the_content()?>
<?php endwhile; else :echo ' there are no posts!'; endif; ?>
______________________________________________________________________________________________________________________________________________

تابع ()the_title عنوان نوشته و تابع ()the_content محتوای نوشته را نمایش می‌دهد. این کار برای هر تعداد مقاله‌ای که در دیتابیس شما موجود است، انجام می‌شود و همه آن‌ها نمایش داده خواهند شد. اگر سایت خود را ببینید، ملاحظه می‌کنید که همه چیز برای ساخت قالب وردپرس به خوبی پیش می‌رود.

گام ششم: اضافه کردن لینک به هر نوشته

اگر برای هر نوشته بخواهیم لینک مجزایی داشته باشیم برای این کار می توانیم از تابع ‌()the_permalink استفاده کنیم. حالا می‌توانید قطعه کد زیر را جایگزین کدهای قبلی در فایل index.php کنید.

______________________________________________________________________________________________________________________________________________

<?php if (have_posts()) : while (have_posts()) : the_post();?>
 
<h2><a href="<?php the_permalink()?>"><?php the_title()?></a></h2>
 
<?php the_content()?> <?php endwhile; else :echo ' there are no posts!'; endif; ?>
______________________________________________________________________________________________________________________________________________

گام هفتم: اضافه کردن هدر و فوتر (سربرگ و پابرگ)

نمایش سربرگ (Header) و پابرگ(Footer) نیز از اهمیت بالایی برخوردار است. این قسمت‌ها در تمامی صفحات سایت شما نمایش داده خواهند شد و جزء اصلی ترینقسمت های قالب هستند.برای این کار از دو تابع ()get_header و ()get_footer استفاده میکنیم. بنابراین کد زیر را جایگزین کدهای قبلی در فایل index.php کنید و تغییرات را ذخیره کنید.

______________________________________________________________________________________________________________________________________________

<?php get_header(); if(have_posts()) : while (have_posts()) : the_post();?>
 
<h2><a href="<?php the_permalink()?>"><?php the_title()?></a></h2>
 
<?php the_content()?> <?php endwhile; else :echo ' there are no posts!'; endif;get_footer; ?>
______________________________________________________________________________________________________________________________________________

اگر در خاطرتان باشد زمانی که پوشه محتویات وردپرس را ایجاد کردیم.در آن پوشه نیز style.css و index.php را قرار دادیم.در این مرحله  footer.php و header.php نیز قابل مشاهده است.در واقع کار این دو فایل این است که محتوایی که ما می‌خواهیم را در قسمت سربرگ و پابرگ سایت نمایش داده شود. محتویات موجود در پوشه وردپرس header.php: این فایل از اهمیت بالایی برخوردار است زیرا تگ های html و body در آن قرار دارند. به قطعه کد زیر توجه کنید:

______________________________________________________________________________________________________________________________________________

<!DOCYTYPE html>
<html <?php language_attributes();?>>
<head>
<meta charset="<?php bloginfo( 'charset');?>">
<title><?php bloginfo('name');?></title>
</header>;
<body <?php body_class(); ?>>
<header class="site-header">
  <h1><?php bloginfo('name'); ?></h1>
 <h4><?php bloginfo('description');?></h4>   </header>
______________________________________________________________________________________________________________________________________________

footer.php: این تابع تگ های باز شده body و html میبندد. به قطعه کد زیر توجه کنید:

______________________________________________________________________________________________________________________________________________

<footer class="site-footer'>
 
<?php bloginfo('name')?>
 
</footer>
 
<?php wp-footer()?> </body> </html>
______________________________________________________________________________________________________________________________________________

گام هشتم: ایجاد فایل functions.php

تاکنون 4 فایل در پوشه قالب wordpress خود ایجاد کردیم. اکنون نوبت فایل functions.php است. یکی از وظایف مهم این فایل تغییر رفتار های وردپرس است این فایل همانند افزونه ای است که ویژگی های زیر را دارد.

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

همانطور که گفتیم تغییرات ظاهری قالب در فایل style.css قرار می‌گیرد. پس با استفاده از فایل functions.php این فایل را برای نمایش ظاهر زیباتر فراخوانی می‌کنیم. قطعه کد زیر را در فایل functions.php قرار دهید:

______________________________________________________________________________________________________________________________________________

<?php
 
functioncustom_them_asset(){ wp_enqueue_style('style',get_stylesheet_uri()); }
 
add_action('wp_enqueue_scripts','custom_theme_assets');
______________________________________________________________________________________________________________________________________________

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

گام نهم: زیبا سازی ظاهر سایت

ابتدا باید یک تگ باز و بسته div با کلاس container را به فایل‌های header.php و footer.php اضافه کنید. در فایل header.php، کد زیر را جایگزین کدهای قبلی کنید:

______________________________________________________________________________________________________________________________________________

<!DOCYTYPE html>
 
<html <?php language_attributes();?>>
 
<head>
 
<meta charset="<?php bloginfo( 'charset');?>">
 
<title><?php bloginfo('name');?></title>
 
<?php wp_head()?>
 
</head>
 
<body<?php body_class();?>>
 
<div class="container"> <header class="site-header">
 
<h1><a href="<?php echo home_url();?>"><?php bloginfo('name');?></a></h1>
 
<h4><?php bloginfo('description');?></h4>
 
</header>
______________________________________________________________________________________________________________________________________________

✔ در مرحله بعد، تگ بسته div را باید اضافه کنید. بدین منظور کد های زیر را در فایل footer.php جایگزین کد های قبلی کنید:

______________________________________________________________________________________________________________________________________________

<footer class="site-footer">
 
<?php bloginfo('name')?>
 
<?footer>
 
<?div>
 
<!-- closes
 
<div class=container"> -->
 
<?php wp_footer() ?>
 
</body>
 
</html>
______________________________________________________________________________________________________________________________________________

✔ در این مرحله باید قالب‌بندی نوشته‌ها را اضافه کنیم. بدین منظور کدهای زیر را که حاوی تگ جدید article است، جایگزین کدهای قبلی در فایل index.php کنید:

______________________________________________________________________________________________________________________________________________

<?php get_header(); if (have_posts()): while(have-post()):the_post();?>
 
<article class="post">
 
<h2><a href="<?php the_permalink() ?>"><?php the_title()?></a></h2>
 
                         <?php the_content()?>
 
               </article>
 
        <?php endwhile;
 
else :
 
   echo '
 
there are no posts!
 
';
 
end if;
 
get_footer();
 
?>
______________________________________________________________________________________________________________________________________________

✔ مرحله آخر هم کدهایی را به فایل style.css اضافه خواهیم کرد که کمی ظاهر سایت بهتر شود. بدین منظور کدهای زیر را جایگزین کدهای قبلی در فایل style.css کنید:

______________________________________________________________________________________________________________________________________________

/*
theme name:customtheme
author: rastchin
author url: htps://rastchin.com
version: 1.0
*/
body{
font-family:arial, sans-serif;
font-size:16px;
color:#545454;
}
a:link, a:visited{
color:#4285f4;
p{
line-height:1.7em;
}
dive.container{
max-width:960px;
margin:0 autu;
}
article.post{
border-bottom:none;
}
.site-header{
border-bottom: 3px solid #ecf0f1;
}
.site-footer{
border-top: 3px solid #ecf0f1;
}
______________________________________________________________________________________________________________________________________________

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

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

Jafarkhan

2 پاسخ به “آموزش ساخت قالب وردپرس”

  1. nader گفت:

    سلام
    این آموزش عالی بود.
    ممنونم از سایت خوبتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

جعفر عباسی مدیر سایت
پرفروش ترین قالب وردپرس با 90 درصد تخفیفــــــ!خرید با 90 درصد
+