"> آموزش طراحی پوسته وردپرس | طراحی سایت قزوین

آموزش طراحی پوسته وردپرس

customizing wordpress

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

پوسته وردپرس از اجزاء مختلفی تشکیل شده است.

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

در ابتدا شاید این به فکرتان برسد که چرا با وجود تعداد زیادی قالب وردپرس رایگان و پولی در سطح اینترنت باید این مورد را یاد بگیریم؟

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

گاهی شما نیاز دارید بخشی از قالب را تغییر دهید.

در صورت نداشتن دانش در این رابطه باید کلی هزینه اضافی پرداخت کنید.

طراحی پوسته وردپرس

اگر نیاز داشته باشید این مورد را فرا بگیرید باید از مرحله صفر شروع کنید.

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

همچنین برای طراحی پوسته وردپرس کلیّه کدهای مورد نیاز شما ضمیمه مقاله شده است.

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

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

چرا یادگیری طراحی پوسته وردپرس اهمیت دارد؟

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

شاید در آینده نیاز به تغییر خاصی در سایت خود داشته باشید.

افزونه‌ها می‌توانند شما را یاری کنند اما همیشه افزونه‌ها کار شما را راه می‌اندازند؟

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

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

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

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

یاد می‌گیرید برای شخصی سازی قالب و ایجاد تغییرات دقیقا کدام فایل را باید ویرایش کنید.

بدون شک یادگیری این مهارت برای شما در آینده کاراریی خواهد داشت.

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

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

ویرایش‌گر های زیادی وجود دارد که ما در اینجا از نرم‌افزار Atom استفاده می‌کنیم.

قدم دوم: ساخت پوشه برای محتویات وردپرس

در ابتدا شما بایستی آخرین نسخه وردپرس را دانلود و آن را در پوشته Public_html هاست یا جایی که مدنظر دارید از حالت فشرده خارج کنید.

اگر قبلا این کار را انجام داده اید نیازی به انجام مجدد این کار نمی‌باشد.

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

wordpress files
wordpress files

ما در اینجا بیشتر با پوشه wp_content کار داریم.

داخل این پوشه، پوشه دیگری به نام themes وجود دارد که تمامی پوسته‌های وردپرسی شما باید داخل آن جای گرفته باشد.

داخل پوشه themes به صورت پیش فرض 3 قالب وجود دارد که ما کاری با آن‌ها نداریم.

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

این نام قالب شما خواهد بود و ما در اینجا نام قالب خود را customtheme قرار داده‌ایم.

custom theme wordpress
custom theme wordpress

قدم سوم: ایجاد فایل‌های style.css و index.php

پس از ساخت پوشه قالب باید دو فایل با نام‌های style.css و index.php ایجاد کنید.

style and index
style and index

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

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

در این فایل کدهای ظاهری سایت قرار می‌گیرد و وردپرسی اطلاعات قالب را در داخل آن قرار می‌دهد.

در ابتدای فایل باید مانند زیر نام قالب، نام سازنده، آدرس سازنده و نسخه قالب قرار بگیرد:

1
2
3
4
5
6
/*
Theme Name: customtheme
Author: DoBest
Author URI: https://dobest.ir
Version: 1.0
 */
style wordpress
style wordpress

index.php: در این فایل تنها جهت تست قالب وردپرسی خود، کد زیر را قرار می‌دهیم:

1
<h1>Custom Theme!</h1>
index wordpress
index wordpress

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

قدم چهارم: فعال سازی قالب وردپرس

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

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

wordpress template
wordpress template

با کلیک بر روی جزئیات پوسته، اطلاعاتی که داحل فایل style.css وارد کرده‌اید به شما نمایش داده می‌شود.

روی دکمه “فعال کردن” کلیک کنید تا پوسته روی سایت شما فعال شود.

سایت خود را نگاه کنید؛ هرچند ظاهر خوبی ندارد ولی برای شروع طراحی پوسته وردپرس شما قابل قبول می‌باشد.

قدم پنجم: وارد کردن کدهای نمایش عنوان و نوشته

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

این پست‌ها داخل پایگاه داده ذخیره می‌شوند و نیاز به فراخوانی در فایل طراحی پوسته وردپرس ما دارند.

در حال حاضر تنها در سایت ما یک عبارت نشان داده می‌شود.

حال می‌خواهیم عنوان و متن پست‌های سایت را در صفحه اصلی نشان دهیم.

در این قسمت ما نیاز به حلقه وردپرس داریم.

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

توسعه دهندگان به کمک همین حلقه صفحه انتشار پست‌ها را می‌توانند تایین کنند.

تغییرات بالا توسط کد زیر انجام می‌گیرد:

1
2
3
<?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 قالب خود قرار دهید.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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 استفاده شده است.

توابع بالا برای هر مقاله‌ای که داخل دیتابیس شما می‌باشد، عمل می‌کند.

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

post wordpress
post wordpress

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

در صورتی که بخواهیم همه نوشته‌ها در صفحه اصلی قرار نگیرد و لینک مختص به خود داشته باشد ویا صفحه اختصاصی داشته باشد، باید فانکشن ‌()the_permalink را مورد توجه قرار دهیم.

برای این مورد باید در طراحی قالب وردپرس خود، فایل index.php، کد زیر  را جایگزین کد فعلی کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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; ?>

با کدهای بالاعنوان نوشته‌ها دارای لینک خواهد شد.

با کلیک بر روی عنوان نوشته، شما وارد صفحه اختصاصی آن خواهید شد.

title wordpress
title wordpress

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

نشان دادن سربرگ (Header) و پابرگ(Footer) بسیار پر اهمیت می‌باشد.

این نواحی در همه قسمت‌های سایتتان نشان داده خواهد شد.

بنابراین در طراحی قالب وردپرس اهمیت به‌سزایی خواهد داشت.

فانکشن سربرگ ()get_header و پابرگ ()get_footer برای این مورد استفاده می‌شوند.

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

1
2
3
4
5
6
7
8
9
10
<?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(); ?>

سایت ما با این تغییر به صورت زیر تغییر خواهد کرد:

subject wordpress
subject wordpress

تا اینجا کاری ما از سربرگ (Header) و پابرگ(Footer) در طراحی قالب وردپرس خود استفاده کرده‌ایم.

نام سایت و توضیحات خلاصه‌ای درباره سایت داخل سربرگ (Header) وجود دارد.

جمله معروف وردپرس نیز داخل پابرگ(Footer) قرار دارد.

حال در صورتی که نیاز باشد محتوای دیگر در این نواحی قرار دهیم، به چه صورت باید عمل کنیم؟

ایجاد 2 فولدر برای طراحی قالب وردپرس اختصاصی خود

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

اینک برای سفارشی کردن هدر و فوتر سایت باید دو فایل با نام‌های header.php و footer.php نیز ایجاد کنیم.

wordpress header footer
wordpress header footer

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

حال با ایجاد دو فانکشن‌ ()get_header و ()get_footer در زمان بارگذاری سایت، سربرگ و پابرگ از دو فایل جدید فراخوانی خواهد شد.

حال اگر سایت خود را مجدد بارگذاری کنید به علت خالی بودن header.php و footer.php، سربرگ و پابرگ نمایش داده نخواهند شد.

ایجاد تغییرات در header.php

تگ‌های باز html و body داخل این فایل است، بنابراین این فایل در طراحی قالب وردپرس اهمیت بالایی دارد.

به عنوان مثال در صورت نیاز به قرار دادن سرویس آمارگیر گوگل آنالیتیکس، باید کدهای آن را در header.php قرار دهیم.

زیرا که تمامی صفحات سایت شما، فایل سربرگ را فراخوانی می‌کند.

به قطعه کد زیر که در آن تعدادی فانکشن جدید استفاده شده است،توجه کنید.

داخل فایل header.php کدهای زیر را بگذارید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
    
<h1><?php bloginfo( 'name' ); ?></h1>
    
<h4><?php bloginfo( 'description' ); ?></h4>
</header>

فانکشن ()wp_head

یک فانکشن بسیار با اهمیت که خروجی را در تگ head می‌گذارد.

زمانی که بخواهید شما افزونه‌های مختلف وردپرس را مورد استفاده قرار دهید، این فانکشن مورد استفاده شما قرار خواهد گرفت.

برای این مورد باید کدهای زیر، جایگزین کدهای پیشین شود:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
    <?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
    
<h1><?php bloginfo( 'name' ); ?></h1>
    
<h4><?php bloginfo( 'description' ); ?></h4>
</header>

ایجاد تغییرات در footer.php

داده‌های لازم داخل فایل header.php قرار گرفت، اینک نوبت به footer.php می‌رسد.

همانطور که میدانید فایل سربرگ، دوتگ باز html و body را شامل می‌شد.

حال ما باید داخل فایل footer.php این تگ‌ها را ببندیم و فانکشن ()wp_footer اضافه شود.

کدهای پایین را داخل فایل پابرگ footer.php قرار دهید:

1
2
3
4
5
6
7
8
9
10
11
<footer class="site-footer">
    
<?php bloginfo( 'name' ) ?>
</footer>
<?php wp_footer() ?>
</body>
</html>

اهمیت و کاربرد فانکشن‌ها در طراحی پوسته وردپرس

و اما اهمیت و کاربرد فانکشن‌ها چیست و دلیل استفاده ما از آن‌ها چه می‌باشد؟

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

مثلا اگر بخواهیم شعار سایت را تغییر دهیم، تنها کافی است از قسمت پیشخوان، متن جدید را جایگزین متن فعلی کنیم.

این تغییرات به صورت خودکار توسط فانکشن‌ها اعمال خواهد شد.

این عمل زمانی اهمیت ویژه‌ای پیدا می‌کند که بخواهیم این قالب را در اختیار دیگران نیز قرار دهیم.

خیلی واضح است که هر سایت اطلاعات مختص به خود را دارد.

عنوان سایت را به صفحه اصلی لینک‌دار کنیم

اگر دقت کرده باشید در اکثر سایت‌ها زمانی که عنوان سایت را کلیک می‌کنیم، به صفحه اصلی منتقل می‌شویم.

برای اضافه کردن این قابلیت کد پایین را جایگزین کدهای پیشین header.php کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
    <?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
    
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    
<h4><?php bloginfo( 'description' ); ?></h4>
</header>

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

تا اینجای کار ما 4 فایل داخل فولدر قالب، جهت طراحی قالب وردپرس خود، ایجاد کرده‌ایم.

حال فایل functions.php که کارهای زیادی برای سایت ما انجام خواهد داد را ایجاد می‌کنیم.

وظیفه این فایل تغییر رفتار پیش‌فرض وردپرس می‌باشد و مثل افزونه‌ای است که باید بداند:

  • به یک متن سربرگ header تایین شده نیازی نیست.
  • داخل فایل‌های قالب باید باشد.
  • تنها روی پوسته‌ای که در نظر گرفته شده، تاثیر بگذارد.
  • فقط در زمان فعال بودن پوسته، اجرا شود.
  • فانکشن‌های PHP، وردپرس و سفارشی را تنها اجرا کند.

البته باید واقع‌بین باشیم.

تا اینجای کار همانطور که معلوم است، ظاهر سایت جالب نشده است.

تغییرات ظاهری سایت داخل فایل style.css قرار خواهد گرفت.

در اینجا ما با کمک فایل functions.php این فایل را برای ظاهری زیبا  فراخوانی خواهیم کرد.

بدین منظور کدهای زیر را داخل فایل functions.php قرار دهید:

1
2
3
4
5
6
7
<?php
function custom_theme_assets() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );

با این تغییر دستور لازم جهت فراخوانی فایل style.css به سمت وردپرس ارسال می‌شود.

حال سوالی که پیش می‌آید این است که چرا از ابتدا style.css را داخل header.php فراخوانی نمی‌‎کنیم؟

پاسخ: موضوع کمی تخصصی است ولی به زبان ساده، بهره گیری از یک فانکشن سفارشی جهت فراخوانی style.css کار را بهتر پیش می‌برد.

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

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

نخست بایستی تگ باز و بسته div با کلاس container را داخل فایل‌های header.php و footer.php قرار دهیم.

داخل فایل header.php کدهای پایین را جایگزین کدهای پیشین کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE 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 می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<footer class="site-footer">
    
<?php bloginfo( 'name' ) ?>
</footer>
</div>
 <!-- closes
<div class=container"> -->
 
<?php wp_footer() ?>
</body>
</html>

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

جهت این‌کار کدهای شامل تگ جدید article را جایگزین کدهای قبلی داخل index.php می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php get_header(); if ( have_posts() ) : while ( have_posts() ) : 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!
';
 
endif;
 
get_footer();
 
?>

پایان کار گدهای زیر را که برای ظاهر بهتر سایت آماده شده است،درون فایل style.css قرار خواهیم داد.

کدهای پایین باید جایگزین کدهای پیشین فایل style.css شوند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
Theme Name: customtheme
Author: Hamyarwp
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;
 }
 div.container {
     max-width: 960px;
     margin: 0 auto;
 }
 article.post {
     border-bottom: 4px dashed #ecf0f1;
 }
 article.post:last-of-type {
     border-bottom: none;
 }
 .site-header {
     border-bottom: 3px solid #ecf0f1;
 }
 .site-footer {
     border-top: 3px solid #ecf0f1;
 }

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

customizer wordpress
customizer wordpress

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

در رابطه با فایل‌ها و کدهای اصلی درون این فایل‌ها آشنا شدیم.

این آموزش نکات و آموزش‌های ابتدایی جهت ایجاد و طراحی پوسته وردپرس را به شما آموزش داد.

امیدواریم این آموزش از سری آموزش‌های وردپرس مدنظر شما قرار گرفته باشد.

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

    ایمیل شما محفوظ خواهد ماند.*