آموزش ساده تبدیل قالب HTML به وردپرس درآقای وردپرس

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

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

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

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

برای فایل styles.css از روش زیر استفاده کنید :

/*
Theme Name : Your template name
Theme URL : Your template url
Description : Descriptions
Author : Author name
Author URL : Author url
Version : Template version
*/

 

این خطوط را در ابتدای فایل CSS قرار دهید.

 

ساختار یک فایل index.php معمولا بدین صورت است :

<Your Doctype Goes Here>
<html>
<head>
<title>Here Goes Your Title…</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div id=”container”>
<div id=”header”>Your Header Information Goes Here…</div>
<div id=”navigation”>Your Navigation Links Goes Here…</div>
<div id=”content”>Your Content Goes Here…</div>
<div id=”sidebar”>Your Sidebar Goes Here…</div>
<div id=”footer”>Your Footer Goes Here…</div>
</div>
</body>

</html>

برای لینک کردن فایل CSS از کد زیر استفاده می کنیم :

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

برای شروع کار باید یک فولدر که معمولا نام قالبمان است در آدرس

wordpress/wp-content/themes بسازیم. سپس دو فایل index.php و styles.css را در آن ایجاد میکنیم. حال برای شکل دادن به فایل index.php از دستورات زیر استفاده میکنیم :

– مشخصات بلاگ :

توسط این دستور نام blog ما نمایش داده می شود :

 

<?php bloginfo(‘name’); ?>

 

اگر بخواهیم نام بلاگمان را به لینک تبدیل کنیم از این روش استفاده میکنیم :

بیشتر بخوانید :   آموزش گذاشتن پربازدیدترین مطالب (نوشته های ) وردپرس بدون پلاگین

 

<a href=”#”><?php bloginfo(‘name’); ?></a>

 

و اگر بخواهیم این لینک را به frontpage منتقل کنیم :

 

<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>

 

توضیحات blog :

<?php bloginfo(‘description’); ?>
    ۲- حلقه :
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
خط اول چک میکند که آیا پستی وجود دارد یا نه و اگر وجود داشته باشد آنرا نمایش می دهد و این حلقه را تا زمانی که پستی وجود داشته باشد ادامه میدهد.     ۳- عناوین پست ها :
<?php the_title(); ?>

 

توسط این دستور میتوان پستها را نمایش دادو باید بین دستورات the_post و endwhile قرار گیرد. برای اینکه هر title به پست خودش لینک شود از دستور زیر استفاده میکنیم :

 

<?php the_permalink(); ?>

 

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

 

<?php the_content; ?>

 

۴- مشخصات پست :

توسط دستورات زیر می توان اطلاعات جانبی مربوط به پستها را نمایش داد، اطلاعات بین تگ زیر قرار می گیرند :

 

<p class=”postmetadata”>……</p>

 

 

برای نمایش عبارت Filled Under از دستور زیر استفاده می کنیم :

 

<?php _e(‘Filled Under#58;’); ?>

 

برای مشخص کردن اینکه این پست مربوط به کدام دسته بندی است از دستور زیر استفاده می کنیم :

 

<?php the_category(‘,’); ?>

 

برای نمایش عبارت By :

 

<?php _e(‘By’); ?>

 

و نمایش نام نویسنده :

 

<?php the_author(); ?>

 

برای نمایش تعداد comment ها :

 

<?php comments_popup_link(‘No Comments »’,’۱ Comment»’,’% Comments»’); ?>

 

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

 

<?php edit_post_link(‘Edit’,’|’,”); ?>

 

در صورتیکه پستی وجود نداشته باشد و بخواهیم عبارتی را نشان دهیم دستور زیر را پایین endwhile قرار می دهیم :

بیشتر بخوانید :   آموزش وردپرس 5 نکته افزایش سرعت سایت وردپرسی

<?php else: ?>
<div class=”posts”>
<h2><?php _e(‘Not Found’); ?></h2>
</div>

 

اگر بخواهیم برای هر پست یک ID قرار دهیم که بتوانیم به آن یک Style خاصی بدهیم از دستور زیر استفاده می کنیم :

 

<div class=”posts” id=”post-<?php the_ID(); ?>”>

 

برای ایجاد صفحه بندی از دستورات زیر می توان استفاده کرد :

<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>

 

 

این دستور را باید بین endwhile و else قرار داد. دستور فوق را می توان بدین صورت customize کرد :

<div class=”navigation”>
<?php posts_nav_link(‘in between’,’before’,’after’); ?>
</div>

هرچه به جای in between نوشته شود بین next و previous می آید و هرچه به جای before نوشته شود قبل آن و هرچه به جای after نوشته شود بعد آن می آید.

 

۵- ساید بار :

برای نمایش Category دستورهای زیر را قبل از پایان body tag قرار می دهیم :

<div class=”sidebar”>
<h2><?php _e(‘Categories’); ?></h2>
</div>

حال برای نمایش لسیت Category ها بدین روش عمل می کنیم :

<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchial=0′); ?>
</ul>

از option های زیر هم می توان استفاده کرد :

 

sort-column=name

 

این عبارت Category ها بر اساس الفبا تنظیم می کند.

 

optioncount=1

 

 

تعداد پست های هر کدام را نشان می دهد.

 

hierarchial=0

 

 

sub-cat ها را درون لسیت نمی برد. بین هر attribute باید از & استفاده کرد.

برای نشان دادن Archives از دستور زیر استفاده می کنیم :

<h2><?php _e(‘Archives’); ?></h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>

برای قرار دادن blogroll بدین روش عمل می کنیم :

 

<?php get_links_list(); ?>

 

 

۶- فرم جستجو :

ابتدا یک فایل به نام searchform.php ایجاد می کنیم و کدهای زیر را درون آن قرار می دهیم:

<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”۱۵″ />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>

بیشتر بخوانید :   برای هر کاربر یک داشبورد سفارشی بسازید!

حال در فایل index.php کد زیر را بالای همه listing ها درون Sidebar می نویسیم :

<li id=”search”>
<?php include(TEMPLATEPATH.’/searchform.php’); ?>
</li>

۷- تقویم :

برای ایجاد تقویم از کد زیر استفاده می کنیم :

<li id=”calendar”>
<?php get_calendar(); ?>
</li>

 

Footer -8  :

 

در انتهای sidebar یک div به نام footer ایجاد می کنیم و کد زیر را درون آن می نویسیم :

 

<div id=”footer”>
<p>
Copyright © ۲۰۰۸ <?php bloginfo(‘name’); ?>
</p>
</div>

* نحوه جدا کردن فایل index.php

 

 

حال بعد از اینکه فایل ما آماده شد باید طبق شکل اول آنرا باید به قسمتهای مختلف تقسیم کنیم. از ابتدای فایل index.php تا پایان قسمت navigation div را درون یک فایل به نام header.php ذخیره می کنیم و دستور زیر را به جای آن درون index.php می نویسیم :

 

<?php get_header(); ?>

 

 

از ابتدای sidebar div تا انتهای آن را جدا کرده و در فایل sidebar.php ذخیره می کنیم و خط زیر را به جای آن در فایل index.php قرار می دهیم :

 

 

<?php get_sidebar(); ?>

 

 

برای footer هم همینکار را انجام می دهیم و در فایل footer.php ذخیره می کنیم و دستور زیر را به جای آن در فایل index.php قرار می دهیم :

 

<?php get_footer(); ?>

 

برای اینکه قسمت archive را از صفحه index جدا کنیم محتویات صفحه index.php را کپی می کنیم و به نام archive.php ذخیره می کنیم و سپس به جای دستور زیر

 

<?php the_content(); ?>

 

دستور زیر را می نویسیم :

 

<?php the_excerpt(); ?>

موفق و سربلند باشید.
بدرود.

منتظر نظرات سازندتون هستم نظر یادتون نره!!!

آقای وردپرس

در حال ارسال
نقد کاربر
۰ (۰ رای)
امتیازات نظرات ۰ (۰ بررسی ها)
دریافت فایل

سید حامد حسینی

بنده سید حامد حسینی هستم ، میدیریت سایت آقای وردپرس و ووکامرس فارسی ، دوست وردپرسی شما ، تیم آقای وردپرس

این پست دارای 14 نظر است

  1. خیلی ممنون از لطف شما.
    مطالب جدیدتر و زیباتر رو هم میتونید بعدا در سایت ببینید

    بدرود موفق باشید

  2. سلام خسته نباشید میشه لطف کنید قالب سایت منو به وردپرس تبدیل کنید من من نتونستم انجام بدم خواهش میکنم۰۹۱۵۵۱۵۲۵۰۳

    1. با سلام با شماره تلفن ۰۹۳۷۵۷۷۰۳۳۳ و یا بخش تماس با ما سایت در ارتباط باشید انجام میشه.

  3. باید کد مربوط به فراخوانی استایل رو قرار بدید و در خود استایل باید کد های مربوطه مربوط به نام فایل نوشته بشه .

  4. حتما . امتحانات دانشگاه دست ما رو بسته . ایشالله آموزش های خوبی میذاریم .

  5. خواهش میکنم و ممنون از شما بازدید کننده ی عزیز .

  6. سلام
    ببخشید من نفهمیدم اموزشتونو تازه واردم مثلا گفتید برای نمایش کامت ها این کد خب این کدو کجا وارد کنیم توindex.php تو header یا…. یا تعداد صفحات و غیر اگه میشه کمکم کنید
    لطف کنید جوابو به ایمیلم بفرستید ممنون

    1. پاسخ به ایمیلتون فرستاده شد دوست من .

  7. ممنون از شما . سایت ما شروع به آموزش طراحی قالب وردپرس کرده و شما میتونید از قسمت تلویزیون وردپرس ( دسته بندی سایت ) این آموزش هارو دانلود کنید . از صفر تا ۱۰۰ آموزش میدیم !

  8. سلام
    خیلی ممنون از آموزش خوبتون
    دوتا سوال؟؟
    آیا کد فقط برای فایل style.css است؟
    و اینکه چطوری یه فایل دیگه که مثلا آدرسش به صورت folder1/mainstyle.css هستش رو لینک کنیم؟؟

    1. سلام . خواهش میکنم . شما میتونید از کد template_directory استفاده کنید برای فایل های دیگه

  9. سلام
    کد این قالب وبلاگی مال میهن بلاگه همین وردپرسیش می خوام بکنم لطفا دوستان قیمت بدهند
    http://zarabanebourse.ir
    باتشکر

  10. درود و سپاس از نوشته ی خوبتون . من یک سایت با bootstrap نوشتم . فقط html و css و jQuery متاسفانه کار با javascript و php رو بلد نیستم . حالا برای سیستم مدیریت محتوا میخوام از وردپرس استفاده کنم . سامانه ی تغیر پروفایل برای افرادی که وارد سایت شده اند یک چیزی شبیه به cloob هست و امکاناتی که عضو ها دارند : ۶ صفحه html هست که مربوط میشه به تغیر عکس و مشخصات و اطلاعات تماس و … میتونم چنین سامانه ای رو روی وردپرس پیاده کنم ؟
    امکانات سایت من یک برگه ی search حرفه ای باید باشه و سامانه ی ورود و خروج , همین و بس . ولی نمیدونم باید چی کار کنم اصلا میشه از وردپرس اسفاده کنم ؟ من سه تا css از bootstrap دارم و یک custom.css . آیا اینهارو یکی کنم در style.css ؟
    و اینکه در قسمت header , خب قراره که سایت من عضویت داشته باشه و header در صورت ورود باید تغیر کنه . اینجا رو نمیدونم چی کار کنم ؟
    بعد سایتی که درست کردم از ۹ صفحه html درست شده . که این ۹ صفحه از سه css تقریلا جداگانه استفاده شده . یعنی برگ نخست و برگه ی search سایت , css جداگانه داره . و همینطور از section استفاده نکردم و قالب تقریبا بی اصول نوشته شده . حالا چند تا پرسش ؟؟؟؟ یکی که میتونم از وردپرس استفاده کنم با برگه ی search ی تقریبا شبیه به سایت sheypoor.com و اینکه برگه نخست من از سه بخش تمام صفحه درست شده . یک سامانه عضویت و وردود هم باید داشته باشه که امکانات سایت وقتی که وارد شود کسی . باز شود . یعنی اینهمه زحمت کشیدم و یک سایت html خفن طراحی کردم برم با یک برنامه نویس php همکاری کنم که با یک روز کار میتونه درستش کنه ؟ یا خودم میتونم یک کاریش کنم ؟ حالا با وردپرس یا php از قالب های رایگان … میشه لطفا اگر پاسخ دادید من رو از ایمیل با خبر کنید . سپاس گزارم شدید .

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

پاسخی بگذارید

در حال ارسال

*

code

بستن منو
×

سبد خرید