طراحی ظاهر و قالب وردپرس – کد محتوا ( Fartak 108232 )
- مقدمه
- ساخت قالب وردپرس
- چرا باید طراحی قالب وردپرس را یاد بگیرم؟
- قدم صفر: برای طراحی قالب وردپرس ابتدا یک ویرایشگر کد نصب کنید.
- قدم اول: برای ساخت قالب وردپرس یک پوشه برای محتویات وردپرس بسازید.
- ساخت یک پوشه برای قالب
- قدم دوم برای ساخت قالب وردپرس: فایل های style.css و index.php را بسازید.
- قدم سوم: قالب خود را از پیشخوان وردپرس فعال کنید
- قدم چهارم : کدهای نمایش عنوان و نوشته پست را اضافه کنید
- قدم پنجم: به هر نوشته، یک لینک اضافه کنید
- قدم ششم: به قالب خود سربرگ و پابرگ اضافه هم کنید.
- ساخت دو پوشه جدید برای قالب اختصاصی وردپرس
- کار با header.php
- قرار دادن ()wp_head
- کامل کردن فایل footer.php
- کاربرد اصلی فانکشن‌ها در قالب وردپرس
- روش لینک دار کردن عنوان سایت به صفحه اصلی
- قدم هفتم: فایل functions.php را بسازید
- قدم هشتم: ظاهر سایت خود را زیبا کنید
- نتیجه گیری
آنچه در این مقاله میخوانید :
مقدمه
قالب وردپرس از اجزاء مختلفی تشکیل شده است که هر یک از این اجزاء کار مخصوص به خود را انجام می‌دهند.
اگر شما نیز به قالب وردپرس علاقه مند هستید و دوست دارید بدانید یک قالب وردپرس چگونه ساخته می‌شود و هر کدام از این فایل‌ها چه کاری را انجام می‌دهند و چگونه می‌توان یک قالب وردپرس را ساخت با ما در هلدینگ فرتاک با آموزش طراحی ظاهر و قالب وردپرس همراه باشید.
ساخت قالب وردپرس
اگر می‌خواهید نحوه عملکرد قالب وردپرس را یاد بگیرید، باید از اول شروع کنید. ما هم در این آموزش کار را از صفر شروع خواهیم کرد و تمام کدهایی را که لازم دارید را ضمیمه کرده‌ایم تا شما هم بتوانید قالب وردپرس شخصی خود را طراحی کنید.
در انتها هم با ارتباط فایل‌های مختلف وردپرس آشنا می‌شویم و می‌توانید، امکانات مورد نظر خود را به قالب وردپرس اضافه نمایید.
چرا باید طراحی قالب وردپرس را یاد بگیرم؟
اگر بخواهید تغییراتی را در سایت وردپرسی خود اعمال کنید شاید با افزونه کار شما انجام شود؛ اما همیشه افزونه کارساز نیست. پس شک نکنید که این مهارت طراحی قالب وردپرس در آینده به کارتان خواهد آمد.
قدم صفر: برای طراحی قالب وردپرس ابتدا یک ویرایشگر کد نصب کنید.
ویرایشگرهای متعددی برای ساخت قالب وردپرس وجود دارد اما ما در این آموزش از نرم افزار Atom استفاده می‌کنیم.
قدم اول: برای ساخت قالب وردپرس یک پوشه برای محتویات وردپرس بسازید.
آخرین نسخه وردپرس را دانلود کنید و آن را در پوشه public_html یا هر پوشه دلخواه دیگر آپلود کنید.
اگر قبلاً وردپرس را روی سیستم نصب کرده‌اید که دیگر لازم نیست این مراحل را که ذکر می‌کنیم انجام دهید. محتویات وردپرس شما باید شامل پوشه‌ها و فایل‌های زیر باید باشند:
ساخت یک پوشه برای قالب
فولدری که ما بیشتر با آن سر و کار داریم، پوشه wp-content است. داخل این فولدر، فولدر دیگری به نام themes وجود دارد که همه قالب‌هایی که بخواهید روی سایت خود نصب کنید، در این فولدر قرار گرفته‌اند.
وردپرس به صورت پیش فرض 3 قالب در این پوشه قرار داده است که ما فعلاً نیازی به آنها نداریم. حال در فولدر themes، یک فولدر جدید بسازید و نام دلخواهی برای آن بگذارید؛ این نام، اسم قالب وردپرس شما خواهد بود.
ما از نام customtheme برای قالب وردپرس خود استفاده کرده‌ایم.
قدم دوم برای ساخت قالب وردپرس: فایل های style.css و index.php را بسازید.
بعد از ساخت پوشه قالب خود در داخل این فولدر دو فایل مجزا با نام‌های style.css و index.php بسازید.
اکنون این فایل‌ها را با استفاده از ویرایشگر کد خود باز نمایید. در ادامه به معرفی این دو فایل خواهیم پرداخت.
Style.css : یک فایل ضروری برای هر قالب وردپرس است که در آن دستورالعمل‌های ظاهری سایت قرار دارد. همچنین وردپرس، اطلاعات قالب وردپرس را از این فایل فراخوانی میکند. در این مثال، ما نام قالب، نام سازنده، آدرس سازنده و نسخه قالب را قرار دادیم.. شما هم کد زیر را در فایل style.css قرار دهید.
1 2 3 4 5 6 | /* Theme Name: customtheme Author: fartak Author URI: https://fartak.online/ Version: 1.0 */ |
Index.php : در این فایل قطعه کدی را قرار خواهیم داد تا نشان دهیم قالب اختصاصی وردپرس ما به خوبی کار میکند.
1 | <h1>Custom Theme!</h1> |
قدم سوم: قالب خود را از پیشخوان وردپرس فعال کنید
وارد پیشخوان وردپرس شوید و از بخش نمایش، وارد قسمت پوسته‌ها شوید.
روی دکمه جزئیات پوسته کلیک کنید تا مطمئن شوید اطلاعاتی که در مورد قالب وردپرس در فایل style.css نوشتیم، به درستی نشان داده می‌شود.
اکنون دکمه فعال کردن را بزنید تا پوسته شما نیز فعال شود. این شروع طراحی و ساخت قالب وردپرس بصورت اختصاصی است.
قدم چهارم : کدهای نمایش عنوان و نوشته پست را اضافه کنید
برای اینکار باید از حلقه وردپرس استفاده کنیم. حلقه وردپرس در واقع موتوری است که وردپرس را اجرا میکند.
با استفاده از همین حلقه، توسعه دهندگان وردپرس خواهند توانست مقاله‌ها را در هر صفحه‌ای که می‌خواهند نمایش دهند. تمام این کارها با کد PHP زیر انجام می‌شود:
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 خود قرار دهید. قطعه کدی که قبلاً در این فایل نوشتید را نیز حذف کنید و کد جدید زیر را جایگزین کنید.
<?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; ?> |
این حلقه در واقع از دو فانکشن استفاده میکند؛ یکی ()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; ?> |
اکنون عنوان نوشته‌ها لینک‌دار شده و با کلیک روی هر یک می‌توان وارد صفحه مخصوص به آن نوشته شد.
قدم ششم: به قالب خود سربرگ و پابرگ اضافه هم کنید.
نمایش سربرگ (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 ساختیم. اکنون برای اینکه بتوانیم محتوای هدر و فوتر را در ساخت قالب وردپرس سفارشی کنیم و امکانات بیشتری ایجاد کنیم، باید دو فایل دیگر به نام‌های header.php و footer.php در فولدر قالب وردپرس بسازیم.
از این به بعد اگر از فانکشن‌های ()get_header و ()get_footer استفاده کنید، محتوای این دو فولدر جدید فراخوانی خواهند شد و اگر یک بار دیگرسایت خود را مجدداً باز کنید، خواهید دید که قسمت سربرگ و پابرگ سایت نمایش داده نخواهد شد؛ زیرا فعلاً فایل‌های header.php و footer.php خالی است.
کار با header.php
این فایل اهمیت زیادی دارد؛ زیرا تگ‌های باز html و body در این فایل قرار می‌گیرند. همچنین اگر از سرویس‌های آمارگیر سایت مثل گوگل آنالیتیکس هم بخواهید استفاده کنید، باید کدهای مربوطه را در ساخت قالب وردپرس در این فایل بگذارید زیرا تمامی صفحات سایت شما این فایل را فراخوانی خواهند کرد.
در کد زیر از چند فانکشن جدید استفاده شده است، به آنها توجه داشته باشید. قطعه کد زیر را در فایل header.php قرار دهید و تغییرات را ذخیره کنید.
<!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
فانکشن ()wp_head از مهم‌ترین فانکشن‌ها در قالب وردپرس محسوب می‌شود. کار این فانکشن‌ها در قالب وردپرس این است که خروجی را در تگ head قرار دهد و زمانی اهمیت پیدا میکند که شما بخواهید از افزونه‌های مختلف وردپرس استفاده کنید.
بسیاری از افزونه‌ها هم باید از این فانکشن‌ها در قالب وردپرس استفاده کنند تا داده‌های خود را در این تگ قرار دهند. پس لازم است این فانکشن‌ها در قالب وردپرس را در فایل header.php قرار دهید. برای این کار قطعه کد زیر را جایگزین کدهای قبلی کنید:
<!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 قرار دادیم؛ اما حالا باید قسمت پابرگ را کامل کنیم. فایل header.php دارای دو تگ باز html و body است. اکنون باید در فایل footer.php تگ بسته آنها را قرار داده و همچنین فانکشن‌ها در قالب وردپرس wp_footer() را نیز اضافه کنیم. قطعه کد زیر را در فایل footer.php قرار دهید:
<footer class=”site-footer”>
<?php bloginfo( ‘name’ ) ?>
</footer>
<?php wp_footer() ?>
</body>
</html>
کاربرد اصلی فانکشن‌ها در قالب وردپرس
شاید برای شما هم سوال باشد که چرا باید از فانکشن‌ها در قالب وردپرس استفاده کنیم؟ پاسخ این است که لازم نیست همیشه برای تغییر اطلاعات سایت، کدهای مختلف را ویرایش کرد.
شاید زمانی شما بخواهید متنی بالای سایت خود را تغییر دهید؛ برای این کار فقط به پیشخوان وردپرس مراجعه خواهید کرد و متن جدید را به‌سادگی جایگزین متن قبلی می‌کنید و به صورت خودکار متن جدید نشان داده خواهد شد.
دلیل این که این متن به صورت خودکار نمایش داده می‌شود، استفاده از فانکشن‌ها در قالب وردپرس است.
این مورد زمانی اهمیت ویژه‌ای پیدا خواهد کردکه بخواهید پس از ساخت قالب وردپرس، آن را به دیگران نیز ارائه کرده و هر یک از آنها نام سایت مخصوص به خود را دارند و اطلاعاتشان با یکدیگر فرق میکند.
روش لینک دار کردن عنوان سایت به صفحه اصلی
لینک دار کردن عنوان سایت به صفحه اصلی این است که مثلاً در بسیاری از سایت‌ها، وقتی روی عنوان سایت کلیک می‌کنید، به صفحه اصلی سایت منتقل می‌شوید.
برای اینکه این قابلیت لینک دار کردن عنوان سایت به صفحه اصلی را به قالب وردپرس اختصاصی خود اضافه نمایید، کد زیر را باید جایگزین کدهای قبلی در فایل header.php کنید:
<!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 را بسازید
فایل functions.php کارهای زیادی برای سایت شما انجام می‌دهد. با استفاده از این فایل می‌توان رفتار پیش فرض وردپرس را تغییر داد. می‌توان این فایل را همانند افزونه‌ای به شمار آورد که :
- نیاز به یک متن سربرگ مشخص ندارد.
- در بین فایل‌های قالب وردپرس باید وجود داشته باشد.
- صرفاً روی قالبی که نصب است تاثیر و تغییر خود را اعمال کند.
- تنها زمانی اجرا خواهد شد که قالب فعال باشد.
- می‌تواند فانکشن‌های PHP، وردپرس و فانکشن‌های سفارشی را نیز اجرا کند.
برای تغییر ظاهر سایت دستور تغییرات ظاهری در فایل style.css قرار می‌گیرد. پس با استفاده از فایل functions.php باید این فایل را برای نمایش ظاهر زیباتر فراخوانی کنید. کد زیر را در فایل functions.php قرار دهید:
<?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 از این جهت که کار را بهتر پیش می‌برد بهتر است و در آینده وقتی وب‌سایت شما بزرگ و بزرگ‌تر می‌شود، خوشحال خواهید بود که این فایل تمامی زحمات سنگین سایت را خود به دوش می‌کشد.
قدم هشتم: ظاهر سایت خود را زیبا کنید
برای انجام این کار، باید یک تگ باز و بسته div با کلاس container را به فایل‌های header.php و footer.php اضافه نمایید. در فایل header.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 کنید:
<?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 کنید:
/* Theme Name: customtheme Author: Hamyarwp Author URI: https://fartak.online/ 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; } |
حالا می‌توانید نگاهی به قالب اختصاصی خود بیندازید. بله این قالب وردپرس را خودتان ساخته‌اید و همه چیز به خوبی پیش خواهد رفت.
نتیجه گیری
به پایان مقاله طراحی ظاهر و قالب وردپرس رسیدیم. امیدواریم در این مقاله با نحوه کارکرد کلی قالب‌های وردپرس آشنا شده باشید.
خوشحال می‌شویم سؤالات خود را در زمینه طراحی ظاهر و قالب وردپرس با ما مطرح کنید.
تیم پشتیبانی هلدینگ فرتاک در زمینه خدمات طراحی سایت، سئو، بهینه‌سازی، دیجیتال مارکتینگف سوشال مدیا و طراحی گرافیک آماده ارائه خدمات به شما است.
سوالات متداول
این مورد بخاطر اینه که سطح دسترسی پایه فراهم نیست. پیشنهاد میکنم از یکی از سطوح دسترسی وردپرس که به نقش کاربری دلخواه شما نزدیکتره استفاده کنید و با کپی گرفتن از اون و تغییر دسترسی نقش کاربری دلخواه خودتون را ایجاد کنید.
در وردپرس هر افزونه‌ای که امکان نمایش محتوا بر اساس شورت کد رو میده رو میتونید در هرجایی استفاده کنید. اگر هم محتواش نمایش داده نشد، میشه با قرار دادن مستقیم داخل فایل قالب این کار رو انجام داد. محدودیتی برای این کار نیست.
