آموزش طراحی پوسته برای وردپرس

aliReza

Well-Known Member
بعد از مدتی تصمیم گرفتم یک آموزش خیلی خوب رو ترجمه کنم و در اختیار دوستان قرار بدم که استفاده کنند.

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

ترجمه رو خودم انجام دادم و بعضی جاها یه مواردی رو اضافه کردم برای تفهیم بهتر!
لطف کنید اگر از این آموزش استفاده کردید ذکر منبع رو فراموش نکنید.

علیرضا :rose:
 

aliReza

Well-Known Member
طراحي پوسته وردپرس - پيشگفتار

پيش از همه شما نياز داريد تا وردپرس را روي كامپيوتر شخصي خودتون اجرا كنيد. اين كار نيازمند يك وب سرور بر روي كامپيوتر شماست كه توصيه من است كه از Xampp استفاده كنيد. زمپ يك پكیج آماده است كه ميتوانيد با آن صفحات پويا را به راحتي با مرورگر بر روی کامپیوتر خود اجرا كنيد.
پس از نصب Xampp (كه از اين به بعد آن را زمپ مي ناميم ) و فعال سازی آپاچی و MySQL ، وردپرس را دریافت و به پوشه xampp/htdocs انتقال میدهیم و از حالت فشرده خارج ميكنيم و مراحل نصب آن را طي ميكنيم. براي ايجاد پايگاه داده ميتوانيد از phpmyadmin استفاده كنيد.
پ.ن: آموزش هاي بسياري براي نصب وردپرس و نصب زمپ در سطح اينترنت وجود دارند، كافي است از گوگل استفاده كنيد.
پس از آن شما به يد ويرايشگر متون براي كدنويسي نياز داريد. ميتوانيد از Notepad‌ ويندوز استفاده كنيد. نرم افزار هاي زيادي براي اينكار وجود دارند. پيشنهاد ميكنيم از، Notepad ++ استفاده كنيد.
حالا شما به يك مرورگر هم نياز داريد، تا زماني كه در حال طراحي پوسته هستيد، پيش نمايش آن را مشاهده كنيد و روند مراحل كار را مشاهده كنيد. پيشنهاد ميكنيم از Firefox استفاده كنيد.


يكبار ديگر مرور ميكنيم:
وب سرور محلي روي كامپيوتر (زمپ بهتر است)
وردپرس
يك ويرايشگر متون (notepad ++ بهتر است)
يك مرورگر (فايرفاكس بهتر است)
يه مقدار هم HTML, CSS بلد باشيد كار راحت تر پيش مِره، البته در مواقع لازم درباره تگ ها توضيحاتي رو خواهم داد.
 

aliReza

Well-Known Member
قسمت دوم پيشگفتار رو اختصاص ميديم به بيان يه سري استاندارد ها، اصطلاحات و بيان يك ساختار كلي از پوسته.
به طور كلي و نه فقط در طراحي پوسته وردپرس، اين نكته را در نظر داشته باشيد كه هر تگ را در جاي خودش ببنديد و نظم رو توي كدنويسي هاتون رعايت كنيد. (اگر چه ممكن است نتيجه كار به هرحال توسط مرورگر نشان داده شود، ولي اينطور بهتر است ) براي نمونه:
صحیح:
HTML:
<ul>
     <li>
     </li>
</ul>
غلط:
HTML:
<ul>
       <li>
       </ul>
  </li>
هر پوسته حداقل بايد داراي يك فايل index.php و يك فايل style.css باشد.
نحوه چيدمان پوسته توسط فايل index.php و موارد مربوط به نمايش و ظاهر پوسته به فايل style.css مرتبط است.
البته يك پوسته ممكن است شامل فايل هاي اضافي ديگري هم باشد، مانند :​
style.css
index.php
home.php
single.php
page.php
archive.php
category.php
search.php
404.php
comments.php
comments-popup.php
author.php
date.php​

ممكن است از تعدادي اصطلاح در اين آموزش استفاده كنيم كه در ادامه اون ها و مفاهيمشون رو با هم ياد ميگيريم

الگو ها ( به انگليسي template) : مجموعه اي از كد ها هستند كه در موقعيت هاي مختلف به صورت چندباره و مكرر مورد استفاده قرار ميگيرند، بدون نياز به اينكه در هرموقعيت مجددا و عينا تكرار شوند.​
فايل هاي الگو فايل هايي هستند كه شامل چندين الگو هستند و هر صفحه از كنار هم چيدن اين فايلها ساخته ميشود.​
از كنار هم قرار گرفتن مجموعه اين فايل ها، تصاوير، فايل هاي Css و ديگر فايل هايي كه ممكن است شما در طراحي خود به كار ببريد، پوسته وردپرس تشكيل ميشود​
در تصوير زير اولويت "فايل هاي الگو"يي كه در يك پوسته قرار ميگيرند نمايش داده شده است. پر اهميت ترين فايل، فايل index.php است و در رديف پايين اهميت فايل ها از چپ به راست كم ميشود.
attachment.php

براي مثال هنگامي كه شما در حال نمايش آرشيو وبلاگ خود هستيد، در صورتي كه فايل archive.php موجود باشد، آرشيو توسط اين فايل نمايش داده ميشود، و در غير اين صورت اين صفحه توسط فايل index.php نمايش داده خواهد شد.

اميدوارم منظورم رو به خوبي رسونده باشم،​
 

پیوست ها

  • main-hierarchy.gif
    main-hierarchy.gif
    4 کیلوبایت · بازدیدها: 124

aliReza

Well-Known Member
درباره فایل های الگو و template ها صحبت کردیم. حالا میخواهیم ببینیم چطور میتوانیم از آن ها استفاده کنیم.
این نکته را در نظر داشته باشید که هر صفحه از وبلاگ شما در وردپرس، از چندین الگو و template ساخته شده، تصویر زیر را در نظر بگیرید
attachment.php

این تصویر شمای کلی index و صفحه اصلی وبلاگ وردپرسی شما را نشان میدهد.
مشخص هست که صفحه اصلی از 4 الگوی header, index, sidebar, footer ساخته شده است.
فایل Header
"عنوان وبلاگ" و "توضیح کوتاه درباره وبلاگ" که در بخش تنظیمات وردپرس وارد کرده اید، معمولا در این قسمت نمایش داده می شود.
attachment.php

فایل index
شامل "عنوان هر نوشته" ، "محتوای هر نوشته" و اطلاعاتی meta مربوط به هر نوشته شامل ( موضوع، نویسنده، زمان نگارش، تعداد دیدگاه ها) می باشد.
attachment.php

فایل sidebar
قسمتی که در سمت راست، یا سمت چپ محتوای اصلی وبلاگ قرار میگیرد و معمولا شامل اطلاعاتی مانند فهرست دسته ها، آرشیو نوشته ها و ... می باشد که به درخواست کاربر قابل تغییر است.
attachment.php

فایل footer
محل نمایش کپی رایت، نام و نشانی درباره سازنده پوسته و یا اطلاعات این چنینی

این نکته رو در نظر داشته باشید که فایل های footer و header در تمامی صفحات بدون تغییر هستند.

دلیل اینکه فایل index در تصویر اول با رنگ قرمز مشخص شده است نیز همین نکته است، این فایل ممکن است در صفحات مختلف دچار تغییر شود و یا فایل دیگری جایگزین آن شود.
در زمان نمایش تنها یک فایل در صفحه اصلی (بسته به تنظیمات وردپرس) اینبار فایل single به کار گرفته می شود که در تصویر زیر میتوانید آن را مشاهده کنید.
در این حالت فایل های الگوی استفاده شده عبارتند از: header, single, sidebar, footer
attachment.php

 

پیوست ها

  • index.gif
    index.gif
    3.7 کیلوبایت · بازدیدها: 114
  • sidebar-template.gif
    sidebar-template.gif
    4.2 کیلوبایت · بازدیدها: 118
  • single.gif
    single.gif
    3.8 کیلوبایت · بازدیدها: 117
  • index-template.gif
    index-template.gif
    5.2 کیلوبایت · بازدیدها: 117
  • header-template.gif
    header-template.gif
    1.1 کیلوبایت · بازدیدها: 115

ArTaBaZ

Well-Known Member
سلام دوست عزیز
اگه آموزش کامل رو درای میتونی بصورت pdf اینجا بزاری تا ما راحت تر بتونیم دنبال کنیم ؟
یا اگه فعلا کامل نیست ، آخر آموزش بزاری ؟
با تشکر
 

جدیدترین ارسال ها

بالا