33
تشکر

آموزش وصل کردن یک قالب به وردپرس – بخش اول

وردپرس

وردپرس

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

این دوره, بهترین آغاز برای کسانی که هیچ آشنایی با وردپرس ندارند است.

در ادامه با ما همراه باشید…

قالبی که میخواهیم به وردپرس وصل کنیم را میتوانید از طریق لینک زیر دانلود کنید. همانطور که بعد از دانلود مشاهده خواهید کرد قالب ما دارای فرمت html است. یعنی فعلا هیچ کد PHP درون آن وجود ندارد.

دانلود قالب

وردپرس

وردپرس

در عکس بالا مشاهده میکنید که سایت را به چهار قسمت تبدیل کردیم. همچنین نام قالب myft میباشد. در ابتدا توصیه میکنم چند نوشته , دسته, برگه, برچسب و نظر در سایت به عنوان مثال وارد کنید.

مقدمات

برای اینکه در وردپرس قالب ما شناخته شود وجود فایلهای index.php و style.css و screenshot.png ضروری است. همچنین باید توضیحات قالب درون فایل style.css وجود داشته باشد.

میتوان در یک قالب فایلهای دیگری هم داشت (اختیاری):

header.php: کدهای بخش header سایت در آن قرار دارد.

footer.php: کدهای بخش footer سایت درون آن قرار دارد.

sidebar.php: کدهای بخش ستون های قالب درون آن قرار دارد.

(میتوان تمام کدهای قالب را درون همان فایل index.php داشت).

single.php: قالب سایت هنگام نمایش یک مطلب.

page.php: قالب سایت هنگام نمایش یک برگه.

404.php: قالب سایت در زمان بروز خطای 404.

(در صورتی که سه فایل بالا وجود نداشته باشد وردپرس از همان فایل index.php برای نمایش تمام قسمت های سایت استفاده میکند).

functions.php: توابع قالب.

comments.php: توابع مربوط به قسمت نظرات.

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

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

آموزش

برای اینکه بتوانیم یک قالب را به وردپرس متصل کنیم باید چند نکته را رعایت کنیم:

1. هر قالب وردپرس باید درون خودش یک تصویر به نام screenshot.png باشد. این تصویر میتواند عکسی از قالب باشد. قالب را باز کنید, یک عکس از آن گرفته و پس از ویرایش های لازم با نام screenshot.png کنار فایل index.html قرار دهید.

2. سپس باید اطلاعات لازم در مورد قالب, سازنده و … را درون فایل style.css قرار دهیم. مانند زیر:

/* CSS Document */
/*
Theme Name: myft
Theme URI: aparnet.ir
Author: mohsen shafiee
Author URI: aparnet.ir
Version: 1.0
License: GPL
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/

کدهای بالا را پس از ویرایش های لازم بالای کدهای درون فایل style.css قرار دهید.

3. سپس فرمت فایل index.html را به index.php تغییر دهید.

خوب حالا قالب را درون مسیر قالب های وردپرس قرار دهید. (wp-content\themes\)

با وارد شدن در قسمت کنترل پنل ادمین وردپرس به قسمت پوسته ها بروید و قالب myft را مشاهده میکنید. این قالب را فعال کنید و نتیجه کار را ببینید. خواهید دید که کل سایت بهم ریخته است. زیرا هنوز سایت استاتیک است و ما باید آن را به داینامیک تبدیل کنیم.

همانطور که متوجه شدید الان تمام کدهای ما درون فایل index.php قرار دارد. اما برای راحتی کار ما باید هر بخش سایت را درون یک فایل به خصوص قرار دهیم.

در ابتدا یک فایل به نام header.php درست کرده و آن را باز کنید. سپس به فایل index.php رفته و کدهای بخش header را برداشته و درون فایل header.php قرار دهید (خط های 1 تا 61).

حال به شرح توابع PHP میپردازیم که قرار است با آنها در فایل header.php کار کنیم.

با استفاده از تابع bloginfo میتوان اطلاعاتی در مورد سایت کسب کرد.

bloginfo('name'); //نام سایت را برمیگرداند
bloginfo('template_directory'); //آدرس جاری قالب را میدهد
bloginfo('description'); //توضیحات سایت را میدهد
bloginfo('url'); //آدرس سایت را برمیگرداند
bloginfo('rss2_url'); //آدرس آر آر اس سایت را میدهد

توسط تابع wp_head میتوانیم به وردپرس و پلاگین ها بفهمانیم که در این مکان اینکلودها را انجام بده. برای مثال اگر پلاگینی بخواهد یک فایل استایل را فراخوانی کند, هر کجا که ما تابع wp_head را قرار دهیم در همان جا تگ link را میگذارد.

wp_head();

توسط تابع wp_page_menu میتوانیم لیست برگه های موجود در سایت را بگیریم.

wp_page_menu();

در صورتی که بخواهیم صفحه اصلی را هم بگیریم باید به صورت زیر عمل کنیم:

wp_page_menu('show_home=صفحه اصلی');

خوب فقط توسط توابع بالا ما بخش header را به وردپرس متصل کردیم. کدهای فایل header.php را میتوانید در انتهای صفحه مشاهده کنید. همچنین کل قالب را با تغییراتی که اعمال کردیم میتوانید در انتهای صفحه دانلود کنید. در بخش دوم از این سری از مطالب به متصل کردن بخش content میپردازیم.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <title><?php bloginfo('name'); ?></title>
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />
  <!--&#91;if IE 8&#93;><link rel="stylesheet" href="files/styles/ie8.css" media="all" /><!&#91;endif&#93;-->
  <!--&#91;if IE 7&#93;><link rel="stylesheet" href="files/styles/ie7.css" media="all" /><!&#91;endif&#93;-->
  <!--&#91;if IE 6&#93;><link rel="stylesheet" href="files/styles/ie6.css" media="all" /><!&#91;endif&#93;-->
  <link rel="shortcut icon" href="files/images/favicon.ico" />
  <meta name="author" content="aparnet.ir" />
  <meta name="keywords" content="" />
  <meta name="description" content="<?php bloginfo('description'); ?>" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  
  <meta name="description" content="اولین تم من در وردپرس" />
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/files/script/date.js"></script>
  <?php wp_head(); ?>
</head>
<body>
  <div align="center">
    <header class="header">
        <div class="wrapper">
          <div id="logo"><a href="/"><img src="<?php bloginfo('template_directory'); ?>/files/images/logo.png" alt="اولین تم من در وردپرس" /></a></div>
              <div id="hd-title">
          <div id="quotescollection_randomquote-0" class="quotescollection_randomquote"><p><q><?php bloginfo('description'); ?></q></p></div>
        </div>
        <div id="hd-time"><span>
          <div id="clock">
                      امروز  
                 <script type="text/javascript">
                      showdate();
                 </script> 
                  </div>
              </span></div>

        </div><!-- /Wrapper -->
        <div class="clear"></div>
        <div class="navigation">
          <div class="wrapper">
              <nav>
          <div class="topnav">
              <ul>
                <?php wp_page_menu('show_home=صفحه اصلی'); ?>
              </ul>
          </div>
            </nav>
            <div id="searchbar" class="left">
          <form id="searchbar" method="get" action="http://www.google.com/search" name="searchbox">
              <input type="text" name="q" class="s-field right" placeholder="جستجو..." />
              <input type="image" src="<?php bloginfo('template_directory'); ?>/files/images/find.png" class="s-btn right" />
              <input type="hidden" name="hl" value="en" />
                    <input type="hidden" name="ie" value="utf-8" />
                    <input type="hidden" name="sitesearch" value="/" />
          </form>
            </div><!-- /Searchbar -->
        </div>
        <div class="clear"></div>
    </div>
</header><!-- /Header -->

دانلود قالب (انتهای بخش یک)

مطالب مرتبط:

آموزش وصل کردن قالب به وردپرس – بخش دوم

آموزش وصل کردن قالب به وردپرس – بخش سوم

این مطلب از سری مطالب، متصل کردن قالب به وردپرس است
  • محمد می‌گه:

    سلام . چرا بعضی از قالب ها قبول نمیکنه و ارور پوسته گم شده هست و شیوه نامه گم شده است میدهد دلیل چیه ؟ تمام کارهایی رو که گفتید انجام دادم

  • sAeeD-j2 می‌گه:

    سلام ببخشید میشه یه پوسته رو که درون وردپرس سیو شده رو به داخل سیستم انتقال بدیم یا به عبارت دیگه کپی یا سیو کنیم…چطور میشه بطور کامل یه سایت وردپرسی یا پوسته ی اونو برداشت و روی یه سیستم دیگه راه اندازی کرد؟

  • صالح می‌گه:

    سلام به شما دوست گرامی
    چطوری میشه یه قالب html رو به وردپرس وارد کرد ؟

  • hasan می‌گه:

    سلام
    خسته نباشید عالی بود
    فقط اگر امکانش هست بعد این اموزش ها پی دی اف راهنمای توابع وردپرس ترجمه کنید مثل این خط
    bloginfo(‘name’); //نام سایت را برمیگرداند

    همش رو ترجمه کنید قرار بدید در سایت ممنون میشیم


  • نظرات این مطلب بسته است.