- طراحی وب
- زمان 3 دقیقه
محمد صادقیدر این آموزش به شما چگونگی ساخت یک قالب وردپرس ساده و تبدیل HTML به قالب وردپرس را نشان میدهیم.
مراحل اولیه:
اول از همه باید یه پوشه با عنوان مورد نظر خودتان در مسیر نصب وردپرس wp-content/themes ایجاد کنید. بهتر است نام این پوشه بدون فاصله باشد و از حروف کوچک استفاده کنید.
برای این آموزش ما پوشه ای با نام tutorial_theme در مسیر یادشده ایجاد کردیم. بهتر است نام این پوشه با عنوان قالبی که قصد ساخت آن را دارید مطابقت داشته باشد.
قبل از شروع با لایه های مختلف قالبی که در این آموزش قصد داریم ارائه دهیم آشنا می شوید، که شامل header, sidebar, content area , footer میباشد و در تصویر زیر مشخص شده است.
برای انجام این کار ابتدا فایل های زیر را به پوشه tutorial_theme خود اضافه میکنیم:
- header.php شامل کد های سربرگ قالب میباشد.
- index.php فایل اصلی برای موضاعات می باشد که محتوا بر اساس این صفحه بارگزاری میشود.
- sidebar.php اطلاعات سایدبارها را شامل میشود.
- footer.php شامل کد های پایین صفحه قالب می باشد.
- style.css این فایل کدهای ظاهر قالب را دارا می باشد.
البته صفحات مختلف دیگری نیز میتوان برای یک قالب پیشبینی کرد. فایل های یاد شده جزو اصلی ترین صفحات برای ایجاد یه قالب وردپرس می باشد.
حال بگذارید نگاهی به آنچه در این فایل ها قرار می گیرد بندازیم:
فایل header.php
این فایل شامل کدهای زیر میباشد:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body ?> body_class(); ?> >
?> wp_body_vlass();?>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
<div>
این کدها ساده شامل HTML و یک سری کد های PHP وردپرس می باشد. در این فایل شما میتوانید متا تگ های مانند عنوان وب سایت ، توضیحات کلیدی و… را مشخص کنید.
بعد از تگ title کد زیر را داریم:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
که در آن ما داریم فایل استایل را به قالب معرفی میکنیم.
فایل 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>
<?php the_content(__('(more...)')); ?>
<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 را فراخوانی میکند و همه کدهای آن را در صفحه کنونی قرار میدهد.
در چند خط بعد از کدهای PHP وردپرس استفاده شده است:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
که چک میکند آیا مطلبی وجود دارد یا نه و در صورت وجود مطلب بر اساس قالب دلخواه شما به نمایش در می آید.
کد:
<h1><?php the_title(); ?></h1>
این کد موضوع مطلب ارسال شده را در تگ h1 قرار میدهد و در خروجی نمایش میدهد.
کد:
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
این کد زمان ارسال مطلب را در تگ h4 قرار میدهد و در خروجی نمایش میدهد.
کد:
<?php the_content(__('(more...)')); ?>
این کد محتوای اصلی مطلب را در تگ p در خروجی نمایش میدهد.
نکته: وردپرس در هنگام فراخوانی تابع the_content محتوا را در تگ p قرار میدهد.
فایل 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>
در این فایل ما از توابع داخلی وردپرس برای نمایش دسته بندی و آرشیو استفاده کردیم.
فایل footer.php
این فایل شامل کدهای زیر می باشد:
<div id="footer"> <h1>FOOTER</h1> </div> </div> </body> </html>
این کد شامل ساده ترین نوع footer میباشد که علاوه بر این شما بر حسب نیاز خود میتوانید در این قسمت لینک های مختلف و کپی رایت و دیگر تنظیمات دلخواه خود را اضافه کنید.
فایل 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 ساده مربوط به ظاهر قالب می باشد.
بعد از وارد کردن کد های بالا در صفحه های مشخص شده قالب شما به شکل زیر خواهد شد:
تبریک میگم، شما اولین قالب وردپرس خود را ایجاد کردید.
همچنین شما میتوانید برای آشنایی بیشتر با توابع وردپرس به مرجع اصلی این توابع در سایت وردپرس مراجعه کرده و با توابع کاربردی بیشتری آشنا شوید.
دیدگاه خود را بیان کنید