مشخصات مقاله
-
1163
-
0.0
-
2581
-
0
-
0
آموزش نحوه ی ایجاد پوسته در WordPress
آموزش نحوه ی ایجاد پوسته (theme) در WordPress
در این آموزش نحوه ی ایجاد یک پوسته ی ساده ی WordPress را به شما خواهیم آموخت.
چگونه می توان یک پوسته ی ساده ایجاد کرد؟
برای شروع به ساخت پوسته، ابتدا یک زیرپوشه در دایرکتوری wp-content/themes، داخل پوشه ی WordPress خود ایجاد نمایید. اینجا نام آن را "tutorial_theme" می گذاریم. اسم پوشه باید با اسم پوسته ای که می خواهید ایجاد کنید، همخوانی داشته باشد. برای این منظور می توانید از FTP client یا ابزار File Manager در cPanel خود استفاده کنید.
پیش از اقدام به ایجاد پوسته برای وبسایت خود، بایستی طرح کلی (layout) آن را مشخص کنید. در این آموزش یک پوسته ایجاد خواهیم کرد از چند بخش header، sidebar، ناحیه ی قرار گیری محتوای اصلی سایت (content area) و یک footer تشکیل می شود:
برای این منظور می بایست فایل های زیر را در دایرکتوری tutorial_theme ایجاد کنید:
- header.php –این فایل دربردارنده ی کدی است که بخش header پوسته را تعریف می کند؛
- index.php –فایلی اصلی پوسته ی سایت می باشد. این فایل حاوی کدی است که بخش Main Area (محتوای اصلی سایت) را تشکیل می دهد و همچنین مشخص می کند دیگر فایل ها در کدام بخش قرار گیرند.
- sidebar.php –این فایل دربردارنده ی اطلاعاتی درباره ی نوارکناری (sidebar) پوسته می باشد.
- footer.php –این فایل footer پوسته را مدیریت می کند.
- style.css –این فایل سبک دهی و style پوسته را مدیریت می کند.
می توانید فایل های یاد شده را در حافظه ی رایانه و با یک ویرایشگر متن نظیر notepad ایجاد کرده، سپس آن ها را از طریق پروتکل FTP بارگذاری (آپلود) کنید و یا از ابزار File Manager در cPanel برای ایجاد فایل های مورد نیاز به طور مستقیم بر روی حساب میزبانی وب استفاده نمایید.
حال نگاه دقیق تری به هر فایل و محتویات آن خواهیم انداخت:
The header.php file
در این فایل کد زیر را وارد نمایید:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
این کد متشکل از HTML، یک خط کد PHP و یک تابع استاندارد WordPress می باشد. در این فایل می توانید meta tag های خود همچون عنوان وب سایت، meta description و واژه های کلیدی صفحه ی خود را وارد نمایید.
خط زیر را بلافاصله پس از title وارد نمایید:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
این کد به WordPress اعلان می کند که باید فایل style.css را بارگذاری کند. فایل مذکور در حقیقت ظاهر (styling) وب سایت را اداره می کند. بخش <?php bloginfo('stylesheet_url'); ?> در واقع یک تابع WordPress است که فایل stylesheet (صفحه ی سبک دهی) را بارگذاری می کند. سپس تگ باز div را همراه با کلاس wrapper اضافه کردیم که ظرف اصلی وب سایت ما خواهد بود. به این خاطر برای آن کلاس تنظیم کردیم تا بعدا بتوانیم آن را از طریق فایل style.css ویرایش کنیم. پس از آن یک برچسب ساده با نام HEADER داخل المان "div" با کلاس (id) "header" اضافه کردیم که بعد در فایل stylesheet مشخص خواهیم کرد (به آن استایل بدهیم).
فایل index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
کد موجود در این فایل با این خط آغاز می شود:
<?php get_header(); ?>
این دستور فایل header.php و کد داخل آن را در صفحه ی اصلی می گنجاند. برای این منظور از یک تابع درون ساخته ی WordPress استفاده می کند. سپس در تگ <h1>
متن Main Area را درج کردیم تا بدین وسیله مشخص کنیم کدام بخش از پوسته ی شما در این ناحیه به نمایش گذاشته می شود.
چند خط بعدی صرفا کد PHP و توابع استاندارد WordPress را شامل می شود. این کد بررسی می کند آیا پست های موجود در وبلاگ شما از طریق ناحیه ی admin ورد پرس ایجاد شده است یا خیر و سپس آن ها را نمایش می دهد.
پس از آن فایل sidebar.php را با این خط اضافه می کنیم:
<?php get_sidebar(); ?>
در این فایل می توانید category پست ها و آرشیو های خود را نمایش دهید.
در گام بعدی، یک المان"div" خالی درج می کنیم که Main Area و Sidebar را از footer جدا می کند.
سرانجام خط زیر را به عنوان آخرین بخش کد اضافه می کنیم:
<?php get_footer(); ?>
این دستور فایل footer.php را داخل صفحه ی شما می گنجاند.
فایل sidebar.php
در فایل sidebar.php، کد زیر را وارد می کنیم:
<div id="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
در فایل مذکور با استفاده از توابع استاندارد ورد پرس، دسته ها (Category) و آرشیو (Archives) پست ها را نشان می دهیم. تابع WordPress آن ها را به صورت آیتم های لیست برمی گرداند، به همین خاطر توابع را داخل لیست های مرتب نشده (تگ های
- ) قرار داده ایم.
فایل footer.php
بایستی کد زیر را به فایل footer.php اضافه کنید:
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
با این کد فقط یک برچسب با نام FOOTER به صفحه اضافه می کنیم. بجای این کد می توان لینک، متن یا نوشته ی بیشتر، اطلاعات مربوط به مالکیت حقوق معنوی (copyright) تم و اشیا اضافی بر سازمان را اضافه کنید.
فایل style.css
خطوط زیر را به فایل style.css اضافه کنید:
body { text-align: center;}
#wrapper { display: block;border: 1px #a2a2a2 solid;width:90%; margin:0px auto;}
#header { border: 2px #a2a2a2 solid;}
#content { width: 75%;border: 2px #a2a2a2 solid;float: left;}
#sidebar { width: 23%;border: 2px #a2a2a2 solid;float: right;}
#delimiter { clear: both;}
#footer { border: 2px #a2a2a2 solid;}
.title { font-size: 11pt;font-family: verdana;font-weight: bold;}
کد فوق در واقع یک فایل ساده ی css است که ظاهر پوسته ی (تم) سایت را تنظیم می کند. خط های کد بالا پس زمینه ی صفحه را تنظیم کرده، بخش های اصلی سایت را با خط پیرامون (border) احاطه می کند.
در این برهه، سایت شما بایستی ظاهری مشابه نمونه ی زیر داشته باشد:
همان طور که قبلا گفته شد، توابع درون ساخته ی WordPress اغلب در کد theme بکار می روند. می توانید برای دریافت اطلاعات بیشتر در رابطه با توابع درونی ورد پرس و مشاهده ی لیست کاملی از آن ها به سایت رسمی ورد پرس مراجعه نمایید.
از حالا به بعد می توانید فایل CSS را ویرایش نموده، تصاویر، انیمیشن و دیگر محتویات لازم را به پوسته ی سایت اضافه کنید و بدین وسیله ظاهر دلخواه را برای وبلاگ طراحی کنید.