آموزش ساخت قالب وردپرس ( طراحی قالب وردپرس حرفه ای )
ساخت قالب برای وردپرس این امکان را به شما خواهد داد تا ظاهر سایت خود را به‌صورتی کامل تغییر دهید و دقیقا همان چیزی که در ذهنتان وجود دارد را پیاده‌سازی کنید.
تا به امروز، میلیون‌ها قالب برای سایت‌هایی موضوعات مختلف توسعه داده شده‌اند؛ اما باید بدانید که استفاده از آن‌ها می‌تواند شما را محدود کند و دقیقا آن چیزی که از یک قالب انتظار دارید را ارائه ندهند.
اگر بتوانید با محدودیت‌های یک قالب کنار بیایید، باید به این نکته هم توجه کنید که علت هک شدن تعداد زیادی از سایت‌های وردپرسی در سال‌های اخیر، استفاده از قالب‌هایی بوده است که مشکلات امنیتی داشته‌اند.
مراحل ساخت و طراحی قالب وردپرس
برای ساخت قالب اختصاصی سایت وردپرسی خود، نیاز دارید که به اصول اولیه برنامه‌نویسی تسلط داشته باشید؛ چرا که باید به سراغ HTML، CSS و زبان‌های برنامه‌نویسی جاوااسکریپت و PHP بروید.
نسخه پنجم از HTML، آخرین نسخه از این زبان نشانه‌گذاری است که به نمایش مداوم محتوا در هر کامپیوتر، تبلت یا گوشی هوشمندی کمک می‌کند.
علاوه‌براین، HTML 5 ویژگی تگ متاها را در اختیار شما قرار می‌دهد. این تگ وظیفه دارد که نمایش وب‌سایت شما در هر مرورگری را با استفاده از تگ که در داخل تگ‌ها قرار می‌گیرد، کنترل کند.
شما می‌توانید جهت ساخت قالب برای وردپرس که واکنش‌گرایی بالایی هم داشته باشد، از ویژگی media queryهای نسخه سوم CSS استفاده کنید. این media queryها، قوانین خاصی را تعیین می‌کنند و نحوه رفتار سایت شما در اندازه‌های مختلف صفحه نمایش را کنترل خواهند کرد.
در زمان توسعه یک قالب، به شما پیشنهاد می‌دهیم که وردپرس را به‌صورت محلی روی کامپیوتر خود نصب کنید. شما با استفاده از این کار می‌توانید ساخت قالب برای وردپرس را بدون هیچ نگرانی در مورد آسیب دیدن سایتتان، ادامه دهید.و بعد از تکمیل شدن قالب می توانید اقدام به ثبت دامنه ir و یا هر دامنه‌ی بین المللی مد نظر خود کنید و به این ترتیب قالب را به سایت اصل انتقال دهید.
همان‌طور که در بالاتر هم به آن اشاره کردیم، بسیاری از سایت‌های وردپرسی با استفاده از قالبی که روی آن‌ها نصب می‌شود، قابل هک هستند. شما اگر قالبی که توسعه داده‌اید را ابتدا روی کامپیوتر خود پیاده‌سازی کنید، توانایی بررسی امنیتی آن به‌صورتی بهتر را خواهید داشت.
توصیه امنیتی دیگری که قبل از ساخت قالب برای وردپرس داریم، تهیه نسخه بک‌آپ از تمام داده‌هایی است که روی سایتتان وجود دارد. در بعضی مواقع، فرایند نصب قالب روی سایت‌های وردپرسی با مشکل مواجه می‌شود و شما برای برطرف کردن این مشکل و در دسترس قرار دادن سریع سایت، مجبورید که سراغ داده‌های بک‌آپ گرفته خود بروید.
برای پیاده‌سازی قالبی که مدنظر دارید، شما باید پنج مرحله را طی کنید که عبارتند از:
مرحله اول : ایجاد و ذخیره فایل‌های مربوط به قالب
به‌صورت کلی، شما می‌توانید فرایند ساخت قالب برای وردپرس را با استفاده از ایجاد دو فایل زیر در فهرست قالب‌ها شروع کنید:
فایل index.php : یک تمپلیت را برای نمایش محتوای قالب آماده می‌کند.
فایل style.css : ظاهر و شکل یک قالب را مدیریت می‌کند.
ساخت قالب برای وردپرس در حداقلی‌ترین حالت ممکن به این دو فایل نیاز دارد، اما چندین فایل پشتیبانی هم وجود دارد که شما می‌توانید با استفاده از آن‌ها، کارهای بیشتری را در زمان طراحی و ساخت قالب موردنظرتان انجام دهید:
فایل header.php : حاوی تمام فایل‌های HTML است که در بالای صفحه شما وجود دارند و با شروع <!DOCTYPE html> می‌شوند.
فایل footer.php : برعکس header.php، حاوی تمام فایل‌های HTML است که در پایان صفحه وجود دارند که تگ </html> را هم در بر می‌گیرد.
فایل functions.php: برای اضافه کردن قابلیت‌هایی به قالب، مانند منو‌ها، رنگ‌ها اسکریپت‌ها و… ، از این فایل استفاده می‌شود.
فایل sidebar.php: وظیفه تولید عناصر نوار کناری را برعهده دارد.
فایل Single.php: قابلیت نشان دادن پستی از صفحه‌ای خاص را دراختیارتان قرار می‌دهد.
فایل page.php: محتوای یک صفحه را نمایش خواهد داد.
شما برای ساخت قالب برای وردپرس، این توانایی را خواهید داشت تا هرکدام از این فایل‌ها را بنابر نیاز خود تغییر دهید. قبل از ادامه این قسمت باید بدانید که حتما تمامی فایل‌های مورد نیاز برای قالب خود را در داخل یک پوشه قرار دهید تا در زمان بارگذاری قالب، وردپرس فایل‌های اشتباهی را پردازش نکند.
توجه داشته باشید که برای ایجاد تمپلیت‌های مختلف برای پست‌ها، صفحات و سایر بخش‌های وب‌سایت خود، باید قالب‌های جداگانه‌ای را ایجاد کنید که هر کدام از آن‌ها فایل‌های HTML 5 و PHP مخصوص خود را دارند.
برای اجرای تمام کارهای گفته شده، شما باید مراحل زیر را طی کنید:
وارد بخش File Manager در panel خود شوید.
برای دسترسی به پوشه قالب‌ها، باید مسیر public_html -> wp-content -> themes را طی کنید.
در پوشه themes، شما باید یک پوشه جدید با نامی اختصاصی بسازید. توجه داشته باشید که این نام به هیچ عنوان نباید دارای فاصله یا عدد باشد.
ما در این آموزش قصد داریم که ابتدا قالب سفارشی‌سازی شده خود را بسازیم و بعد از آن سراغ محتوا برویم؛ پس فایل‌های header.php، index.php، footer.php، functions.php، sidebar.php، single.php و page.php را مطابق شکل زیر ایجاد کنید.
اکنون، تمام فایل‌های PHP مورد نیاز را ایجاد کرده‌ایم و قصد داریم که سراغ فایل CSS برویم.
مرحله دوم: تنظیم و ایجاد فایل CSS Stylesheet
فایل CSS Stylesheet، وظیفه طراحی بصری و طرح‌بندی صفحات وب‌سایت شما را برعهده دارد. در واقع، ساخت قالب برای وردپرس و نمایش عناصری مانند فونت‌ها و رنگ‌ها، نیاز به یک Stylesheet دارد. اگر شما این فایل CSS را ایجاد نکنید، وردپرس به‌هیچ عنوان قالب سفارشی شما را به‌عنوان یک تمپلیت معتبر تشخیص نخواهد داد.
بعد از ایجاد فایل style.css، باید یکسری از اطلاعات، شامل نام قالب، نسخه قالب، توضیحات و توسعه‌دهنده آن را در بالا قسمت بالایی وارد کنید. این اطلاعات در داخل کنترل پنل مدیریت سایت نمایش داده می‌شوند.
نمونه‌ای از این اطلاعات را می‌توانید در قسمت زیر مشاهده کنید:
<p style=”text-align: left;”>/*
Theme Name: My Theme
Author: Hostinger
Author URI: http://www.hostinger.com/tutorials
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/</p>
بعد از انجام تمام کارهای گفته شده، قالب شما در داخل داشبورد وردپرس قابل مشاهده خواهد بود. برای دسترسی به بخش قالب‌ها، کافیست که ابتدا وارد قسمت Appearence شوید و سپس روی Themes بزنید. هر اسمی که برای قالب خود انتخاب کرده‌اید، در آنجا و در داخل یک قالب سفید خاکستری نمایش داده خواهد شد.
اگر در این مرحله قالب ساخته شده را انتخاب کنید، تنها یک صفحه سفید به شما نمایش داده خواهد شد؛ چرا که هنوز فایل index.php را خالی گذاشته‌اید. برای ایجاد تغییرات در فایل php مورد نظر، تنها کافیست که بعد از اطلاعات وارد شده در CSS، یک خط جدید ایجاد و سپس کدهای زیر را در آن وارد کنید:
<p style=”text-align: left;”>* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}</p>
اولین بخش کد بالا مربوط به ظاهر طراحی و همچنین واکنشگرا بودن آن است. <*> که در قسمت بالا قرار دارد، مربوط به تمام عناصر html مورد استفاده است. این تگ بیان می‌کند که هر آیتم در صفحه نهایی باید دارای حاشیه‌هایی باشد.
قسمت دوم کد بالا هم رنگ پس زمینه را به سفید و فونت پیش‌فرص مورد استفاده در قالب را تعیین خواهد کرد. باید این نکته را به‌خاطر داشته باشید که کد بالا فقط عناصر اصلی را به قالب سفارشی شما اضافه می‌کند. کار ما فعلا با فایل style.css تمام شده و بعد از تکمیل دیگر فایل‌ها، باز هم سراغ آن خواهیم آمد.
مرحله سوم: کاربردی کردن قالب وردپرس
قبل از ادامه ساخت قالب برای وردپرس، بهتر است که فایل‌های functions.php و sidebar.php را تغییر دهید تا انعطاف‌پذیری قالب افزایش یابد.
functions.php :
هر مرورگر دارای تنظیمات پیش‌فرض متفاوتی برای عناصری مانند حاشیه‌های صفحه است؛ به همین دلیل، باید تنظیمات و نرمال‌سازی‌هایی را در فایل CSS انجام دهید تا از نمایش یکسان سایتتان در تمام مرورگرها اطمینان حاصل کنید.
برای انجام این کار، شما نیاز دارید که یک فایل css به نام normalize.css را در داخل فایل functions.php خود قرار دهید. این فایل در نهایت به مرورگرها اجازه خواهد داد تا سایت شما را بدون توجه‌به عناصر به کار رفته در آن، به‌درستی نمایش دهند. برای انجام این کار باید کد زیر را در functions.php وارد کنید:
<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
wp_enqueue_style( ‘normalize-styles’, “https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css”);
}
add_action(‘wp_enqueue_scripts’, ‘add_normalize_CSS’);
پس از اضافه کردن کد بالا، تنها کافیست که یک Navigation Menu ثبت کنید تا ویژگی Menu در داخل Appearance فعال شود. برای این منظور، باید کد زیر به فایل functions.php اضافه شود:
// Register a new sidebar simply named ‘sidebar’
function add_widget_support() {
register_sidebar( array(
‘name’ => ‘Sidebar’,
‘id’ => ‘sidebar’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
) );
}
// Hook the widget initiation and run our function
add_action( ‘widgets_init’, ‘add_widget_support’ );
در پایان هم باید فایل functions.php را ذخیره کنید و ببندید.
Sidebar.php :
موضوع دیگری که باید در زمان ایجاد قالب وردپرس به آن توجه کنید، نوارهای کناری است که در سایت نمایش داده می‌شوند. برای آنکه بتوانید به نوار کناری و همچنین ویجت‌ها این اجازه را دهید تا در هر کجای قالب شما ظاهر شوند، کافیست که از تابع ()get_sidebar استفاده کنید. برای انجام این کار، کافیست که کدهای زیر را در فایل sidebar.php قرار دهید و سپس تغییرات ایجاد شده را ذخیره کنید:
خط اول کد بالا در فرایند ساخت قالب برای وردپرس، به وردپرس اعلام خواهد کرد که اگر نوار کناری وجود نداشته باشد، نباید قالب نشان داده شود. خط دوم کد هم به ویژگی‌های عنصر حاوی ویجت و همچنین خط سوم به تابع وردپرس برای نمایش نوار کناری اشاره دارد.
بیشتر بخوانید: تبدیل صوت به متن گوگل
قدم چهارم: ایجاد یک طرح برای تم سفارشی
در این قسمت قصد داریم که سراغ ایجاد طرح‌بندی قالب اختصاصی برای وردپرس با اصلاح فایل‌های index.php، header.php، style.php، page.php، single.php و footer.php با استفاده از media querieها بپردازیم.
Header.php :
همان‌طور که در بالاتر هم به آن اشاره کردیم، header.php قسمت بالایی سایت شما را مشخص خواهد کرد که شامل موارد زیر است:
DOCTYPE :
به مرورگر خواهد گفت که سایت شما را باید چگونه نمایش دهد.
تابع ()language_attributes :
کدهای مربوط به زبانی که در زمان نصب انتخاب کرده‌اید را موقع باز کردن تگوارد خواهد کرد.تابع body_class: کلاس‌های پیش‌فرض CSS را براساس وردپرس به تگ‌های body می‌دهد.
تابع wp_nav_menu :
این تابع، Navigation Menu را در هدر سایت شما نمایش خواهد داد.
با گشت‌وگذار در اینترنت، متوجه خواهید شد که تکنیک‌های زیادی برای ایجاد قالب وردپرس واکنشگرا وجود دارد که یکی از آن‌ها، متا تگ‌ها هستند. اگر شما قطعه کد زیر را در قالب خود قرار دهید، می‌تواند وب‌سایت شما را به‌صورت خودکار با اندازه نمایشگر تنظیم کند:
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
با اضافه شدن قطعه کد بالا، فایل header.php به صورت زیر درخواهد آمد:
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo(‘name’); ?> » <?php is_front_page() ? bloginfo(‘description’) : wp_title(”); ?></title>
<meta charset=“<?php bloginfo( ‘charset’ ); ?>”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“<?php bloginfo(‘stylesheet_url’); ?>”>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class=”my–logo“>
<h1><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><?php bloginfo(‘name‘); ?></a></h1>
</header>
<?php wp_nav_menu( array( ‘header–menu‘ => ‘header–menu‘ ) ); ?>
Index.php :
فایل index.php مربوط به صفحه اصلی سایت شما است. یکی دیگر از کاربردهای آن در زمانی خواهد بود که وردپرس، فایل‌های single.php و page.php را پیدا نمی‌کند؛ در این موقعیت، فایل index.php به‌عنوان طرح پیش‌فرض نمایش داده خواهد شد.
وردپرس این امکان را فراهم آورده تا در فرایند ساخت قالب برای آن، از تابع‌های get_sidebar، get_header و get_footer استفاده کنید تا مطمئن شوید که کدهای نوار کناری، قسمت بالایی و پایانی صفحه که تعیین کرده‌اید، در صفحه اصلی گنجانده شده‌اند.
برخی دیگر از عناصر که در صفحه نمایش داده می‌شوند، دارای کلاس‌هایی هستند که به آن‌ها اختصاص داده شده‌اند و در فایل style.css وجود دارند. برای آنکه بتوانید لیستی از پست‌ها و گزیده‌های آن‌ها را نمایش دهید، باید از حلقه‌های وردپرس استفاده کنید. با استفاده از آن، آخرین پست‌ها به صفحه اصلی اضافه خواهند شد؛ پس، نمایش نهایی فایل index.php به‌صورت زیر است:
<?php get_header(); ?>
<main class=”wrap“>
<section class=”content–area content–thin“>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=”article–loop“>
<header>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
در کد زیر، حلقه وردپرس از خط چهارم آغاز می‌شود در نهایت با خط شانزدهم به پایان می‌رسد.
Footer.php:
شما باید در این فایل، سراغ تعریف قسمت پایانی هر صفحه از وب‌سایت خود بروید. این قسمت یکی از حیاتی‌ترین بخش‌هایی است که باید روی پیاده‌سازی آن تمرکز کافی را انجام دهید. قسمت پایانی صفحه خود را می‌توانید با استفاده از تگ‌های معنایی <footer></footer> تعریف کنید.
برای آنکه در نهایت مطمئن شوید که کدهای وردپرس و جاوااسکریپت به صفحه اصلی شما اضافه خواهند شد، باید action hook مورد نظر با نام wp_footer را فراخوانی کنید. با ذخیره شدن این فایل، هر تگ HTML باز دیگری که در فایل‌های hook دیگر باز است، بسته خواهد شد.
Single.php :
فایل single.php، طرح‌بندی و شکل نهایی تک پست‌هایی که در وب‌سایت خود منتشر می‌کنید را مشخص خواهد کرد. شما می‌توانید این فایل را به‌صورتی کاملا متفاوت درمقایسه‌با فایل index.php طراحی کنید.
برای آنکه پست‌های قرار گرفته در وب‌سایت به‌صورت کامل نمایش داده شوند، شما باید از تابع the_content استفاده کنید. در نهایت، کد کامل php این فایل باید به شکل زیر باشد:
<?php get_header(); ?>
<main class=”wrap“>
<section class=”content–area content–full–width“>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=”article–full“>
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>
پس از ذخیره کردن این کد، ساخت قالب برای سایت وردپرسی شما یک قدم به اجرا نزدیک‌تر خواهد شد و بدون نوار کناری هم به شما نمایش داده می‌شود.
Page.php :
با استفاده از این فایل، شما مشخص خواهید کرد که نحوه نمایش صفحات به چه صورت خواهد بود. برای انجام این کار، کافیست که کد زیر را به فایل page.php خود اضافه کنید:
<?php get_header(); ?>
<main class=”wrap“>
<section class=”content–area content–thin“>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=”article–full“>
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
مرحله پنجم : بهبود طراحی در فایل CSS Stylesheet
در قسمت‌های قبلی به CSS Stylesheet اشاره کردیم و متوجه شدیم که این فایل، طراحی و چیدمان عناصر موجود در وب‌سایت شما را کنترل خواهد کرد. از آنجایی که قبلا مقداری کد به فایل اضافه کرده‌ایم، حال می‌خواهیم که طراحی خود را اصلاح کنیم.
برای انجام این کار، کافیست که در فرایند ساخت قالب برای وردپرس، قطعه کد زیر را به قسمت انتهایی فایل style.css اضافه کنید:
.my-logo,
footer {
width: ۱۰۰%;
padding-left: ۱%;
margin-bottom: ۸px;
background-color: #۷۸baff;
border: ۱px solid #۷۸baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: ۴۰۰;
}
article > header {
}
footer {
margin-top: ۴px;
}
a {
text-decoration: none;
}
/* ‘Margin: 0 auto’ centers block content on the page */
.wrap {
width: ۹۹%;
margin: ۰ auto;
}
.content-area {
display: inline-block;
}
.content-thin {
width: ۷۰%;
}
.content-full-width {
width: ۱۰۰%;
}
.content-area,
.primary-sidebar {
display: inline-block;
}
.primary-sidebar {
width: ۲۵%;
padding: ۱%;
vertical-align: top;
background-color: #ececec;
}
.article-loop {
width: ۴۵%;
text-align: left;
margin: ۵px;
padding: ۱۰px;
}
.article-full {
width: ۹۹%;
padding: ۱%;
}
.article-loop,
.article-full {
display: inline-block;
vertical-align: top;
background-color: #FFF;
border-radius: ۴px;
margin-bottom: ۴px;
}
کد بالا، نمونه‌ای از کاری است که می‌توانید با استفاده از این فایل انجام دهید. پس از ذخیره آن، قسمت‌های مختلف دارای پس زمینه سفید و حاشیه‌های آبی رنگ خواهند شد.
حال که فرایند ساخت قالب برای وردپرس را به اتمام رسانده‌اید، می‌توانید آن را روی وب‌سایت وردپرسی خود پیاده‌سازی کنید. قالب سفارشی جدید شما باید ظاهری شبیه‌به عکس زیر داشته باشد:
با استفاده از کد بالا، اگر دو کادر متنی در کنار هم قرار دهید که هر کدام از آن‌ها نیمی از صفحه را اشغال کنند، باز هم در زمان تغییر اندازه مرورگر، نیمی از صفحه را اشغال خواهند کرد و این نسبت به هیچ عنوان تغییر پیدا نمی‌کند.
با تغییر متغیرهای موجود در این فایل css، می‌توانید مشخص کنید که پس از کوچک‌تر شدن اندازه مرورگر تا حد مشخصی، کادرها تمام صفحه را اشغال کنند و در زیر یکدیگر نمایش داده شوند.
جمع‌بندی
ساخت بهترین قالب وردپرس، فرایندی طولانی و پیچیده دارد و شما توانستید با استفاده از این مقاله از ایران هاست، یک قالب ساده را برای خودتان طراحی کنید. اگر قصد دارید که قالب حرفه‌ای‌تری را برای سایت وردپرسی خود بسازید، باید دانشتان در زمینه برنامه‌نویسی را افزایش دهید تا بتوانید به‌راحتی تمامی تغییرات پیچیده‌تر را پیاده‌سازی کنید.
