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

آموزش ساده تبدیل قالب 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 قرار می دهیم :

<?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(); ?>

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

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

آقای وردپرس

دانلود فایل

درباره سید حامد حسینی

آقای وردپرس رو با دنیا عوض نمیکنم !

29 دیدگاه

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

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

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

  3. سلام.قبل از نوشتن این تابع های وردپرس برای تبدیل،اگر فقط فایل html رو .phpکنیم و یه css داشته باشه ،توی پوسته ها شناخته میشه؟ چرا میگه پوسته گم شده ؟،درصورتیکه هم شیوه نامه و هم index.phpداره.

  4. با سلام
    ضمن تشکر از زحمت شما
    برای فهم بهتر انجام یک تمرین نمونه و گام به گام خیلی موثر خواهد بود
    مثلا شما یک نام فرضی را انتخاب کنید و یک فرمت آماده را با نام فرضی ایجاد کنید
    و هر کس بتواند با ویرایش فایل و شخصی سازی آن در پایان یک فایل قابل اجرا داشته باشد
    و از همین طریق میتواند اشکالات را نیز برطرف نماید.
    اگر بخواهم مثالی را از پیشنهادم بگویم مثل فایل رجیستر کردن ابتدای خود ورد پرس است
    که همه چیز آن آماده است و شما فقط مقادیر را تغییر میدهید
    نام فایل مورد نظر من بعنوان مثال: wp-config-sample.php

    …………………………………..
    <?php
    /**
    * The base configurations of the WordPress.
    *
    * This file has the following configurations: MySQL settings, Table Prefix,
    * Secret Keys, WordPress Language, and ABSPATH. You can find more information
    * by visiting {@link http://codex.wordpress.org/Editing_wp-config.php Editing
    * wp-config.php} Codex page. You can get the MySQL settings from your web host.
    *
    * This file is used by the wp-config.php creation script during the
    * installation. You don't have to use the web site, you can just copy this file
    * to "wp-config.php" and fill in the values.
    *
    * @package WordPress
    */

    // ** MySQL settings – You can get this info from your web host ** //
    /** The name of the database for WordPress */
    define('DB_NAME', 'database_name_here');

    /** MySQL database username */
    define('DB_USER', 'username_here');

    /** MySQL database password */
    define('DB_PASSWORD', 'password_here');

    /** MySQL hostname */
    define('DB_HOST', 'localhost');

    /** Database Charset to use in creating database tables. */
    define('DB_CHARSET', 'utf8');

    /** The Database Collate type. Don't change this if in doubt. */
    define('DB_COLLATE', '');

    /**#@+
    * Authentication Unique Keys and Salts.
    *
    * Change these to different unique phrases!
    * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}
    * You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again.
    *
    * @since 2.6.0
    */
    define('AUTH_KEY', 'put your unique phrase here');
    define('SECURE_AUTH_KEY', 'put your unique phrase here');
    define('LOGGED_IN_KEY', 'put your unique phrase here');
    define('NONCE_KEY', 'put your unique phrase here');
    define('AUTH_SALT', 'put your unique phrase here');
    define('SECURE_AUTH_SALT', 'put your unique phrase here');
    define('LOGGED_IN_SALT', 'put your unique phrase here');
    define('NONCE_SALT', 'put your unique phrase here');

    /**#@-*/

    /**
    * WordPress Database Table prefix.
    *
    * You can have multiple installations in one database if you give each a unique
    * prefix. Only numbers, letters, and underscores please!
    */
    $table_prefix = 'wp_';

    /**
    * WordPress Localized Language, defaults to English.
    *
    * Change this to localize WordPress. A corresponding MO file for the chosen
    * language must be installed to wp-content/languages. For example, install
    * fa_IR.mo to wp-content/languages and set WPLANG to 'fa_IR' to enable Persian
    * language support.
    */
    define('WPLANG', 'fa_IR'); // by http://wp-persian.com Team 🙂

    /**
    * For developers: WordPress debugging mode.
    *
    * Change this to true to enable the display of notices during development.
    * It is strongly recommended that plugin and theme developers use WP_DEBUG
    * in their development environments.
    */
    define('WP_DEBUG', false);

    /* That's all, stop editing! Happy blogging. */

    /** Absolute path to the WordPress directory. */
    if ( !defined('ABSPATH') )
    define('ABSPATH', dirname(__FILE__) . '/');

    /** Sets up WordPress vars and included files. */
    require_once(ABSPATH . 'wp-settings.php');

  5. با سلام مجدد
    البته فراموش کردم بگم کار شما قابل تقدیره و من علاقه مندم با شما در ارتباط باشم
    در صورت علاقه مندی وبسایت ما را مطالعه فرمائید و اگر به برنامه های ما علاقه مند بودید میتوانید با شماره زیر با من تماس حاصل فرمائید
    *************
    با تشکر
    ایراهیمی

  6. خیلی مطلب مفیدی بود ، در مورد سی اس اس های یک قالب هم اگه مقاله بذارید ممنون میشم.

  7. عالی بود ، ممنون از مطالب کاربردیتون .

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

  9. مثل همیشه عالی بود – فقط من یه سوال داشتم اینکه برای ساخت یه قالب وردپرسی از صفر چه چیز هایی لازم داریم ؟ چرا تو سایتهای فارسی در این زمینه آموزش تخصصی پیدا نمیشه ؟ چرا هیچکسی آموزش طراحی قالب وردپرس حرفه ای رو از ابتدا آموزش نمیده ؟؟؟

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

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

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

  12. درود و سپاس از نوشته ی خوبتون . من یک سایت با 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 از قالب های رایگان … میشه لطفا اگر پاسخ دادید من رو از ایمیل با خبر کنید . سپاس گزارم شدید .

  13. سلام چنتا خواهش دالشتم
    قالب وب منم صحیفس
    بالا منوی مشکی رنگ هست ک نوشته:

    خانه
    انجمن های پشتیبانی
    موضوعات و دسته بندی
    نمونه کارها ( به زودی )
    فروشگاه ( به زودی )

    + اون بالا برگه هایی ک ساختی
    میتونی راهننائیم کنی منم مث خودت درست کنم
    ممنون میشم
    خدا اجرت بده
    هاست وردپرس ( به زودی )

    و این نظرات دادن ک شخصی شدس

  14. عالی بود ممنون خیلی به کارم اومد

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

  16. خیلی کلی توضیح داده بودید ولی ممنون بابت زحماتتان…

  1. پینگ بک سوالات وردپرسی خود را اینجا بپرسید - صفحه 10

ارسال دیدگاه

ایمیل شما منتشر نخواهد شد فیلد های الزامی مشخص شده اند *

*

x

بیشتر بخوانید

نکاتی در راستای سئو مطالب سایت

نکاتی در راستای سئو مطالب سایت

امروزه بهینه سازی مطالب سایت یکی از دغدغه های مدیران هر سایت شده ، برای ...