Rtl Theme LOGO

تنها مرجع قانونی عرضه قالب و افزونه در ایران ...

شرکت فناوری اطلاعات راست چین

ایمیل: info [at] rtl-theme.com
نشانی: تبريز - خیابان امام، مسجد کبود
ساختمان پزشکان، طبقه 4

تلفن ویژه : ۰۳۸۳۱۱۲۴

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

دسته‌بندی: آموزش وردپرس
۲۴ اسفند ۱۳۹۹
۳۱۹ بازدید

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

چگونه قالب وردپرس بسازیم

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

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

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

ابتدا برنامه وردپرس خود را بروزرسانی کنید و پوشه 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;
}

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



ارسال دیدگاه

برای ارسال دیدگاه شما باید وارد شوید!


تومان
2021 PopUp