ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت پوسته ی ورد پرس!
نویسنده پیام
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #1
آموزش ساخت پوسته ی ورد پرس!

مدتی است که قصد

داشتم آموزش نحوه ی ساخت پوسته برای وردپرس را بدهم ، امروز تصمیم خود را عملی کرده و اولین درس از این سری آموزشی را به استحضار بینندگان عزیز می رسانم. این سری آموزشی احتمالاً شامل ۱۲ الی ۱۴ درس می باشد. مطمئناً با خواندن این سری آموزشی قرار نیست یک شبه قالب های حرفه ای طراحی کنید ، اما به شما قول می دهم که اگر این سری را به صورت کامل پی بگیرید و مطالب گفته شده را آنگونه که من می خواهم دریافت کنید ، علاوه بر آشنایی با بخش های اصلی وردپرس (البته در بخش پوسته ها) قادر به رفع بسیاری از مسائل موجود در پوسته تان

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

[align=CENTER DIR=RTL][تصویر:  wp-php-theme.jpg]


در پایان این سری آموزشی شما با کمی تلاش قادر هستید حتی پوسته های بسیار قشنگ و مقبولی را بسازید ، اما باید کمی هم کار کنید و مسلماً از دانش بکار رفته در سایر پوسته ها نیز استفاده کنید . شما قادرید تا در پایان این سری آموزشی قالبی همچون قالب سایت های حرفه ای بسازید



در اولین درس از این سری آموزش به آموزش مفاهیم اولیه و قوانین اصلی در کد نویسی را خواهیم پرداخت. مطمئناً اگر کمی
php
و
xhtml
کار کرده باشید فهم بسیاری از مطالب برایتان راحت تر خواهد بود ، ولی اگر هیچ گونه آشنایی با این دو زبان ندارید ، حتماً به قوانین گفته شده در این مباحث توجه کنید.



قبل از اینکه درس را به صورت جدی شروع کنیم ، دو کار را باید انجام داده باشید.



۱- نصب یک سرور خانگی بروی رایانه تان با استفاده از برنامه هایی مانند
WinLAMP
یا
Xampp

2- نصب وردپرس بروی سرور خانگی



توجه ۱: پیشنهاد می کنم که از برنامه ی
Xampp
استفاده کنید .



توجه ۲:
برای اینکه از این سری آموزشی عقب نمانید ، در اسرع وقت دو عمل بالا را انجام دهید.



در این سری قرار نیست که همه چیز را به صورت یکجا به شما بیاموزیم ، زیرا با اینکار تنها شما را گیج تر خواهیم کرد. آموزشی که به شما خواهیم داد ،اگرچه بر اساس سورس نیست ، ولی کاملاً پله به پله خواهد بود.




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











عنوان درس : معرفی مفاهیم



شروع درس :



در این درس مباحث زیر را تحت پوشش خود قرار خواهیم داد.


»
قوانین اصلی

»
زبان ویژه / اصطلاحات مخصوص

»
سلسله مراتبی بودن


[b]»
قوانین اصلی: سه قانون اصلی که باید به یاد بسپارید:



قانون اول : هر تگی را که باز کرده اید ، باید ببندید.

[تصویر:  ul-tag.png]

نکته :

تگ چیست ؟ هر تگ بوسیله ی دو کاراکتر < و > ساخته می شود.هر تگی را که زمانی باز کرده ایم باید در سرانجام ببندیم. برای بستن تگ علاوه بر استفاده از کاراکترهای < و > باید از
/
نیز کمک گرفت. در مثال بالا تگ
ul
اینگونه “<
ul
>” باز شده است و اینگونه “
</ul>
” نیز بسته شده است . اگر دقت کنید در بین تگ باز و بسته
ul
یکسری کدهای دیگر آمده است. این کدها چون بین تگ
ul
قرار دارند بنابراین خاصیت تگ
ul
را نیز به خود می گیرند. در ادامه با نحوه ی کار و خاصیت این تگها آشنا خواهید شد.



قانون دوم : تگها نباید بصورت تو در تو در یکدیگر ایجاد شوند.
[/b]


برای مثال به عکس زیر توجه کنید:

[تصویر:  right-and-wrong-of-closing-copy.gif]

اگر یک تگ باز و بسته را دایره ای در نظر بگیریم ، هیچ دایره ای نباید همدیگر را قطع کند ، بلکه باید دایره ها یا کاملاً جدا از یکدیگر باشند و یا داخل یکدیگر قرار گیرند . باز هم برای فهم بیشتر به عکس زیر توجه کنید:

[تصویر:  circle.png]

قانون سوم : هر پوسته ای حداقل نیازمند دو فایل است : یکی
Style.css
و دیگری
index.php
. البته مسلماً شما پوسته هایی را که تا بحال مشاهده کرده اید ، شامل فایلهای بیشتری بوده است.


[font=Tahoma]
معمولاً یک پوسته از فایلهای زیر تشکیل می شود.

[list]
[*]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

از لیست بالا نترسید ، در درسهای بعدی خواهید فهمید که هر فایل برای چیست و اینکه ترستان بی مورد بوده است.


»
زبان ویژه / اصطلاحات مخصوص (
Lingo
)
:



مسلماً در هر مبحثی اصطلاحات و کلمات ویژه ای وجود دارد ، در زیر با برخی از این کلمات آشنا خواهیم شد:



۱-
Template
: یک گروه از کدها که شما می توانید از این کدها بدون نوشتن چندباره ی آنها در مکان های مختلف استفاده کنید.
۲-
Template file
: یک فایل که شامل یک یا چند گروه از کدها (
Template
) می شود. هر صفحه ی وبی شامل چندین
Template file
می شود ، مانند فایلهای
index.php
،
styel.css
،
sidebar.php
و…
۳-
Theme or WordPress theme
: تمام فایلهایی که شما استفاده می کنید مانند : عکس ، کد ، نوشته و…
توجه : پوسته های وردپرس (
WordPress theme
) و
template
وردپرس دو چیز متمایز هستند . با این وجود خیلی از مردم آنها را یک چیز به حساب می آورند.
۴-
Post

: هم اکنون ، شما در حال خواندن یک
post
هستید . بعلاوه ،
Post
ها یک ورودی ساده برای وبلاگ شما و یا هر وبلاگ دیگری هستند . برای مثال یک صفحه از دفترچه ی خاطرات شما هم یک
Post
محسوب می شود.
۵-
[b]Page

: یک نوع خاص از
Post
که در زیر مجموعه ی دسته ها (
Category
) نیز قرار نمی گیرد.
Page
ها از گروه
Post
سایت شما مجزا هستند. در زبان پارسی(بهتر است بگوییم در وردپرس پارسی)
Page[/b]
را همان برگه معنی کرده اند.
[b]توجه :
در وردپرس
Page
و
page
دو چیز مختلف هستند. یک
P
و
p
بین آنها تفاوت بزرگی را ایجاد می کند ، که در آینده بیشتر با این تفاوت آشنا می شویم.


»


سلسله مراتبی بودن:



شکل زیر به راحتی به شما نشان می دهد که ، سیستم وردپرس به جستجوی چه فایلهایی می گردد. البته در عکس زیر بعضی از فایلها آورده نشده اند . من تنها ۶ فایل از ۱۳ فایل موجود را برایتان لیست کرده ام. با این فایلها در درس های آینده بیشتر آشنا خواهیم شد.
[/b]

[تصویر:  main-hierarchy.gif]

سلسله مراتبی بودن مربوط به
template file
ها می شود و اهمیت مراحل و فایلها را برای ما نمایان می کند.در عکس بالا فایل
index.php
دارای بیشترین اهمیت می باشد و سپس در ردیف دوم از سمت چپ به راست اهمیت فایلها کاهش می یابد. برای مثال در وردپرس فایل
archive.php
مربوط به تنظیمات صفحات آرشیو می شود. حال اگر به هر دلیلی فایل
archive.php
وجود نداشته باشد، وردپرس این امتیاز را به فایل
index.php
می دهد ، که در این صورت تنظیمات صفحات آرشیو از طرف فایل
index.php
کنترل می شود. به این می گویند سلسله مراتبی بودن.



اگر از مجموعه ی
template file
ها فایل
single.php
از دست برود، کدام فایل جایگزین
single.php
برای نشان دادن محتوای صفحات تنها خواهد شد؟
درست حدس زدید. باز هم فایل
index.php
این مسئولیت را تقبل خواهد کرد.



پس اگر اشتباه نکنم باید متوجه شده باشید که فایل
index.php
دارای بیشترین اهمیت می باشد و در صورت نبود هر یک از فایلهای موجود ، فایل
index.php
مسئولیت آنرا قبول می کند تا محتویات آن صفحه را نشان دهد.



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

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

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
15-03-2012 03:29 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #2
RE: آموزش ساخت پوسته ی ورد پرس!
در دومین درس از سری آموزشی ساخت پوسته ی وردپرس بازهم به توضیح و معرفی برخی دیگر از مفاهیم می پردازیم .و از جلسه ی بعد به طور رسمی کار با فایل
index.php
را شروع خواهیم کرد. اگر شمادرس اول از این سری را نخوانده اید ، این بخش را ادامه ندهید و در ابتدا درس اول را مطالعه کنید ، در غیر این صورت برخی از کلمات و توضیحات گفته شده در این بخش برای شما نا آشنا خواهند بود.

[align=CENTER DIR=RTL][تصویر:  wp-php-theme.jpg]
[/align]
در این درس قصد داریم تا با ساختار template files و templates در صفحه بیشتر آشنا شویم. درس امروز ما کوتاه است.

بعلت طولانی شدن صفحه ، بقیه ی پست را در ادامه ی مطلب آوردم.



بیاد داشته باشید که هر صفحه ای از وبلاگ شما از چندین template files تشکیل شده است ، مانند عکس زیر که یک مثال است:
[تصویر:  index.gif]
در مثال بالا ، صفحه ی مورد نظر از چهار template files تشکیل شده است که عبارتند از:



header
،
index
،
sidebar
و
footer



»
و اما Header Template File چیست؟


عنوان وبلاگ شما (blog’s title) و توضیحات وبلاگ تان (description) در این فایل قرار می گیرد. معمولاً Header Template File در تمامی صفحات وبلاگ به یک صورت و بدون تغییر باقی می ماند.
[تصویر:  header-template.gif]

»
حال Index Template File چیست؟
این فایل یکی از مهمترین بخش ها محسوب می گردد و شامل عنوان مطالبتان (post title) ، محتوای مطالبتان (content) (مانند نوشته و عکس هر
post
) و
اطلاعات هر پست (post meta data) (مانند اسم نویسنده ی مطالب ، تاریخ انتشار ، زیر دسته ، تعداد نظرات و ..) می شود.
[تصویر:  index-template.png]

»
Sidebar Template File چیست؟


توسط این بخش ، برگه ها (Page links listing) ، دسته ها (
Category
) ، [/i][b]آرشیو (
archive links listing) ،
پیوندها (blogroll listing) و…. وبلاگتان کنترل می شود . (در مثال گفته شده سایدبار (
sidebar
) شما در سمت راست قرار گرفته دارد ، در حالی که این تنها یک مثال است ، سایدبار شما هر جایی می تواند باشد.)


توجه : ابزارک ها (Widgets) شما نیز توسط Sidebar Template File کنترل می شوند.
[تصویر:  sidebar-template.gif]

»
و در آخر Footer Template File چیست؟
این template file شبیه بخش header.php و یا همان Header Template File می باشد. فوتر (
Footer
) معمولاً از صفحه ای به صفحه ی دیگر ثابت می ماند . شما هر چیزی را می توانید در این فایل قرار دهید ، اما معمولاً داخل این فایل اطلاعات کپی رایت
نوشته می شود.
[تصویر:  footer-template.gif]
حالا به من اجازه دهید تا توضیح بدهم که چرا فایل
index.php
در عکس بالا با رنگ قرمز مشخص شده است . در مثال بالا
index.php
با رنگ قرمز مشخش شده است تا به شما نشان دهد که این قسمت یک بخش متغیر است و به هر صفحه از وبلاگ شما بستگی دارد.پس باید متوجه شده باشید که بخشهای
Footer
،
Header
و
sidebar
که با رنگ سیاه مشخص شده اند معمولاً قسمتهای ثابتی هستند.

اگر شما به داخل صفحات تنهای سایت خود بروید (single post) چهار template files خواهید داشت ، شامل : header، single ، sidebar و footer


اما اگر نمی دانید که صفحات تنها (
single
) چه هستند باید بگویم ، همان صفحاتی که ادامه ی مطلب در آن نوشته می شود، برای مثال شما که همین الان در حال خواندن این مطلب هستید در یک صفحه ی تنها (
single
) قرار دارید . در صفحات تنها امکان نظر گذاشتن نیز وجود دارد.

[تصویر:  single.gif]
درس کوتاه امروز ما به پایان رسید .سری آموزشی ساخت پوسته ی ورد پرس را دنبال کنید.

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
15-03-2012 03:30 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,725
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #3
RE: آموزش ساخت پوسته ی ورد پرس!
درود


منبع؟

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
15-03-2012 03:30 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #4
RE: آموزش ساخت پوسته ی ورد پرس!
منبع:P30 Help (کمک رایانه) و البته کمی هم خود بنده بهش اضافه نمودم

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
15-03-2012 03:36 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #5
RE: آموزش ساخت پوسته ی ورد پرس!
۱۱ / ۱۰ / ۱۳۸۷

شروع کار با
index.php


همانگونه که قول داده بودیم در این جلسه کار با فایل
index.php
را شروع خواهیم کرد که شامل ۳ درس از این سری آموزشی

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

[تصویر:  wp-php-theme.jpg]

حال وقت آن رسیده است که خواندن محض را رها کرده و بصورت عملی دست به ساخت پوسته ی وردپرس بزنید . در این درس ، شما دست هایتان به کدهای وردپرس کمی آشنا خواهد شد. قبل از شروع درس باید حتماً یک وبلاگ وردپرس ، بروی رایانه تان نصب کنید (نه بصورت آنلاین ، بلکه آفلاین زیرا بسیار آسانتر است بویژه برای ما ایرانیان) که در این باره در جلسه ی اول توضیح دادیم.



بعلت طولانی شدن صفحه به ادامه مطلب مراجعه کنید.









مرحله ی اول: باز و فعال کردن برنامه ی
Xampp



به فولدر اصلی این برنامه بروید.
My Computer > xampp
و یا
C:xampp
(یا هر جای دیگری که این برنامه را نصب کرده اید.)



بروی
xampp-control.exe

کلیک کنید . پنجره ای با حالت
pop up
باز خواهد شد.
آپاچی (

Apache
)
و
Mysql

را اجرا کنید. برای اینکار شکل برنامه باید مانند تصویر زیر شده باشد:

[تصویر:  xampp-control.gif]

حال موتور آپاچی و
MySql

روشن شده و آماده برای کار هستند. برنامه را کوچک کنید.





مرحله ی دوم : ساخت یک فولدر برای پوسته



به بخش پوسته های وردپرس بروید ، یعنی آدرس زیر:

xampp/htdocs/wordpress/wp-content/themes

در این مکان فولدری بنام
tutorial
بسازید. به همین سادگی…





مرحله ی سوم: ساخته فایل
index.php
و
style.css



برنامه ی
notepad
یا هر ویرایشگر متن مورد علاقه ی خود را باز کنید.



فایل
index.txt
را دانلود کرده و هرآنچه داخل این فایل هست را کپی کرده و در برنامه ی
notepad
بچسبانید (
paste
کنید.)



بعد از اینکار فایل
notepad
را درون پوشه ی
tutorial
بنام
index.php[/b]
[i] [/i]
ذخیره کنید.

[تصویر:  save-as-indexphp.gif]
[تصویر:  save-as-indexphp2.gif]

دوباره ی یک
notepad
جدید باز کنید (باید کاملاً خالی باشد) . در همان حالت کاملاً خالی فایل
notepad
را با نام
Style.css[/i]
درون فولدر
[b]tutorial
ذخیره کنید. حال پنجره های
notepad
را ببندید.



بعد از این اعمال شما درون این فولدر باید فایلهایی با نام های
style.css
و
index.php

داشته باشید.

[align=CENTER DIR=RTL CLASS=ENTRY-TITLE][تصویر:  index-and-style.gif]

توضیحات
index.php :



بروی عکس زیر کلیک کنید تا آنرا بصورت کامل و بزرگ مشاهده کنید تا من برای شما قلمرو و ناحیه هر کد را شرح دهم. (برای بزرگ دیدن عکس بروی آن کلیک کنید.)


[تصویر:  indexphp-explain.gif]

»


Doctype

- این عبارت نشان می دهد که شما از چه نوع کدی در پوسته تان استفاده کرده اید .فهم
Doctype
زیاد اهمیت ندارد . من خودم ویژگیهای
Doctype
را تعیین کردم ، بنابراین شما نیازی نیست که در این مورد زیاد فکر کنید.



»


<html>
- این تگ نشان می دهد که صفحه ی وب شما از کجا شروع می شود.



»


<head>

- این تگ به ما نشان می دهد که سر (
[b]head

) صفحه ی وب ما از کجا شروع می شود. هر صفحه ی وبی شامل یک
body
و
head
می باشد.
<
/
head>
تگ

به شما نشان می دهد که تگ
head
کجا تمام می شود.
[/i]


[i]
<?php bloginfo(’stylesheet_url’); ?>
[/b]
یک تابع [i](
[i]function[/b]
[i])[/b] هست که صدا می زند[/b] یا فرا می خواند برای مکانی که فایل
style.css
در آن قرار دارد (البته در همان فولدر که در اینجا فولدر
tutorial
می شود) بنابراین پوسته ی ما می تواند به آن و یا هر استایل دیگری برای صفحه ی وب مان لینک بدهد . هرگاه کدی قرار بگیرد بین عبارت های

<?php



و

?>

این قسمت از کد زبان
PHP

محسوب می گردد که با گروه دیگر کدهای من تفاوت دارد . در زبان
php
عبارت
<?php


نشان از شروع و عبارت
?>
نشان دهنده ی پایان کدهای پی اچ پی می باشد.



بنابراین :



»



<?php

- یعنی شروع کدهای
php
[b]
»



bloginfo(’stylesheet_url’)
[/b]
- صدا می زند برای مکانی که
style.css
قرار دارد.
[b]
»


;
- صدا زدن یا فراخواندن برای
Style.css
را متوقف می کند .

سی می کالون

(
;
) یک راه برای بستن گروهی از کدهای
php
هست . بنابراین هرگاه که عبارت
;[/b]
را مشاهده کردید ، بدانید که یک دستوری از پی اچ پی پایان یافته است.

[b]
»

?>
-
یعنی پایان کدهای
php



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







»


<body>

- این تگ نشان می دهد که بدنه ی اصلی صفحه ی وب ما از کجا شروع می شود. بدنه شامل هر چیزی می شود که ما بروی صفحه ی وب می بینم و می خوانم . شمایی که در حال خواندن این آموزش هستید یعنی در حال نگاه کردن به بدنه ی صفحه ی وب این صفحه هستید . تگ
</body>
هم نشان دهنده ی این است که بدنه صفحه ی وب پایان یافته است.(مشخص است دیگر)



»


</html>

- این تگ نشان دهنده ی این است که صفحه ی وب من تمام شده است و هیچ چیز دیگری بعد از آن نیست.





مرحله ی چهارم : هر چیزی که داخل فایل
style.txt
هست را به درون فایل
style.css
که در فولدر
tutorial
قرار دارد ،

کپی و پیست کنید

و تغییرات را
save
نموده و صفحه را ببنید.





مرحله ی پنجم : پوسته تان را منتشر کنید
برای اینکار یک مرورگر را باز کنید[/b]



درون آدرس بار مرورگرتان تایپ کنید عبارت :

[b]http://localhost/wordpress/wp-admin


و

سپس به داخل بخش مدیریت وردپرس بروید.
(
wordpress
که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس گذاشته اید.)



هنگامی که داخل بخش وردپرس شدید ، به بخش مدیریت پوسته ها بروید و پوسته ی
Tutorial
را فعال نمایید.



توجه کنید که پوسته ی شما هنوز هیچگونه عکس بند انگشتی (
thumbnail
) ندارد. و باکس آن خالی از عکس می باشد .

عکس آن به صورت زیر باید باشد:

[تصویر:  theme-empty-screenshot.gif]

حال یک صفحه ی جدید در مرورگر باز کنید و بروید به آدرس
http://localhost/wordpress
. شما یک صفحه ی خالی را (
blank page
) خواهید دید . منظورم یک صفحه ی کاملاً خالی است. اگر صفحه ی باز شده کاملاً خالی نیست ، شما صفحه ی اشتباهی را گشوده اید و یا اشتباهی در کارتان بوده است.
توجه :
wordpress
که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس انتخاب کرده اید.



حال پوسته ی شما منتشر شده است. فکر کنم که برای این جلسه کافیست . در جلسه ی بعدی ، ما کار با
header template
را

شروع خواهیم کرد.



فراموش نکنید که بخش کنترل
Xampp
را ببندید
. برای اینکار بروی آیکون آن در بخش
system tray
دوبار کلیک کنید و
Mysql
و
Apache

را متوقف کنید ، سپس بروی
Exit
کلیک نمایید.
مانند عکس زیر:
[/b]

[تصویر:  xampp-control-close.gif]

منتظر درس بعدی از این سری باشید.

[/align]

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
15-03-2012 03:40 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,725
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #6
RE: آموزش ساخت پوسته ی ورد پرس!
درود بر شما

بسیار عالی

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
15-03-2012 03:41 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #7
RE: آموزش ساخت پوسته ی ورد پرس!
کار با Header Template
اگر با این سایت همراه بوده اید، حتماً مطلع هستید که مدتی پیش سری آموزشی ساخت پوسته ی برای وردپرس را شروع کردیم ، حال در این پست چهارمین بخش از این سری آموزشی را به شما یاد خواهیم داد. باز لازم است تا این جلمات تکراری را به کار ببرم، که اگر شما دروس قبل را مطالعه نکرده اید، همین جا دست نگه داشته و به پست اول از همین موضوع اولین درس را خوانده و بعد از این، با ما همراه شوید. فرصت زیاد است.
[تصویر:  wp-php-theme.jpg]
در جلسه ی قبل، من به شما نشان دادم که چگونه در بخش کنترل برنامه Xampp ، آپاچی و
MySQL
را فعال کنید. پوسته تان را نصب نمایید، و در آخر شما را کمی با
PHP
آشنا کردیم. امروز ما با
PHP
ادامه داده و به شما یاد خواهیم داد که چگونه عنوان وبلاگتان (blog’s title) را صدا بزنید یا فراخوانی کنید.


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





نکته مهم: [/b]بیاد داشته باشید ، هر کدی را تایپ کنید، و

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


خوب درس را شروع می کنیم:




مرحله اول:


از طریق کنترل برنامه ی Xampp، آپاچی و
MySQL
را فعال کنید. سپس، فولدر پوسته هایتان را که در آدرس زیر:
xampp/htdocs/wordpress/wp-content/themes/tutorial قرار دارند را باز کنید
.
شما هم اکنون باید ۲ فایلی که جلسه ی قبل ساخته اید را مشاهده کنید. فایلهای
index.php
و
Style.css

[تصویر:  index-and-style1.gif]
فایلهای
index.php
و
style.css
باید با فایلهای
index.txt
و
style.txt
پر شده باشند(یعنی باید محتویات داخل آنها یکی باشد).



مرحله دوم:

- یک پنجره از مرورگر وب باز کنید. سپس به آدرس http://localhost/wordpress بروید . شما باید یک صفحه ی خالی مشاهده کنید ، چون شما یک پوسته ی خالی را در جلسه ی قبل نصب کردید.

(
wordpress
که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس انتخاب کرده اید).
- به فولدر پوسته هایتان باز گردید و فایل
index.php
در
notepad
باز کنید. برای اینکار بروی
Index.php
راست کلیک کرده ،
properties
را انتخاب نموده و بروی
change
کلیک کنید ، سپس
notepad
یا ویرایشگر متن دلخواه تان را انتخاب کنید. من به شخصه
notepad
را انتخاب کردم . در آخر نیز بروی
ok
کلیک کنید.

[تصویر:  view-php-with-notepad.gif]
[تصویر:  change-view-tool-for-php.gif]
[تصویر:  select-notepad.gif]
تا اینجا، شما، فولدر پوسته هایتان، یک مرورگر وب و فایل
index.php
را (با
notepad
) باز کرده اید.

[تصویر:  review.gif]


مرحله ی سوم:

شما باید به محتویات داخل فایل
index.php
دقت کنید. حال برای شروع:



عبارت

<?php bloginfo(’name’); ?>
را در بین تگ های <body> و
</body>
تایپ کنید و تغییرات را
save
نمایید.

[تصویر:  bloginfo-name.gif]
[تصویر:  save-it.gif]
سپس بازگردید به صفحه ی مرورگر وب تان و آن صفحه را
Refresh
کنید(بوسیله ی دکمه ی
F5
هم می توانید اینکار را انجام دهید). شما باید عنوان وبلاگتان را مشاهده کنید. عنوان وبلاگ من این هست :
Demo Theme Development

[تصویر:  refreshed.gif]
حال توضیح و آنچه اتفاق افتاده است؟

شما یک خط از کدهای
PHP
را درون فایل
index.php
و درون تگهای
body
از صفحه ی وب تان اضافه کردید. این یک خط اطلاعات وبلاگتان را صدا می زند. در حقیقت دستور
bloginfo()
وظیفه ی صدا زدن و یا فراخوانی اطلاعات وبلاگ شما را دارد و از آنجایی که داخل پرانتز مقدار
“name
را وارد کرده ایم ، پس این دستور صرفاً نام وبلاگتان را صدا می زند.
نکته۱: نامی که شما بعنوان عنوان وبلاگتان قرار دادید، در بخش مدیریت وردپرس قابل تنظیم و تغییر است.


نکته۲: چون
bloginfo()
یک دستور
PHP
هست بنابراین باید بین عبارت
<?php
و
?>
قرار گیرد.



»

<?php
[/b] - شروع کدهای
php

[b]
»

bloginfo(’name’)
[/b] - اطلاعات وبلاگتان را فراخوانی می کند البته در اینجا عنوان وبلاگتان، فراخوانی می شود.
[b]
»
; - سیمی کولون صدا زدن(فراخوانی)[/b] اطلاعات وبلاگ را متوقف می کند.
[b]
»

?>
- پایان کدهای
php


درصورتی که شما هرگونه تغییری در فایل
index.php
ایجاد کردید، آنرا
save
کنید و در آخر هم صفحه ی مرورگر وب را
refresh
کنید تا تغییرات را مشاهده نمایید.




مرحله چهارم:

اگر دقت کرده باشید عنوان وبلاگتان([i]blog’s title) قابل دیدن است، ولی قدرت لینک ندارد، یعنی قادر نیستم که بروی عنوان وبلاگ کلیک کنیم تا به صفحه ی اول سایت برویم.

برای فعال کردن لینک نوشته عنوان وبلاگ، باید از یک تگ
XHTML
کمک بگیریم. برای اینکار به فایل
index.php
بروید.


تگهای
<a href=”#”>
و
</a>
را به همان خط اضافه کنید. خط جدید شما بایستی به صورت زیر در بیاید:

[align=LEFT DIR=LTR CLASS=ENTRY-TITLE]<a href=”#”><?php bloginfo(’name’); ?></a>
سپس به مروگرتان بازگردید و صفحه را
refresh
کنید. هم اکنون باید امکان لینک را برای عنوان وبلاگتان مشاهده کنید. جالب است نه….

[تصویر:  refreshed2.gif]
حالا، یک لینک تشکیل داده اید، اما لینکی هست که به هیچ کجا نمی رود، زیرا بجای آدرس درست آن، از # استفاده کرده اید. از این پس اگر بخواهید برای عنوان وبلاگتان، یک لینک بسازید، این روش را بکار بگیرد. یعنی:

عبارت
<?php bloginfo(’url’); ?>
در بین نقل قول (



) دستور
href=
قرار دهید.


تغییرات را
save
کنید، الان باید خطی مانند زیر را داشته باشید:


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

برگردید به مرورگر و صفحه را
refresh
کنید، وقتی که بروی عنوان سایت بروید،
Status bar
باید به شما آدرس http://localhost/wordpress را به شما نشان می دهد(دلیل اینکه
WordPress
با رنگ قرمز مشخص شده است را دیگر نمی گویم).

[تصویر:  status-bar.gif]
وقتی که بروی لینک مورد نظر ما یعنی همان عنوان وبلاگ کلیک کنید، شما به صفحه ی اول وبلاگ تان فرستاده خواهید شد.

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

و
http://localhost/wordpress وجود دارد. شما با این نکات، در درس های بعدی بیشتر آشنا خواهید شد.


حال توضیح و آنچه اتفاق افتاده است؟

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


»

bloginfo(’url’)
- اطلاعات وبلاگ شما را فراخوانی می کند
.
مخصوصاً در اینجا

که آدرس یا
URL
صفحه ی اصلی تان را فراخوانی می کند.

»
<a> - یک تگ از
XHTML
هست برای لینکدار کردن یک
عبارت مخصوص (عبارتی[/b] که بین تگ های
<a>
و
<
/a
>
قرار می گیرد)


[b]
»

</a>
- تگی است که امکان لینک دار شدن یک نوشته را می بندد . در صورت عدم استفاده از این تگ ، صفحه ی وب شما نمی داند که نوشته ای که لینکدار کرده اید کجا پایان می یابد و در این صورت یک لینک بزرگ خواهیم داشت، یعنی تمام نوشته های وبلاگ به یک آدرس لینک دار خواهند شد. همچنین قانون اول[/b] را بیاد بیاورد، هرچیزی را که باز کرده اید، باید ببندید.
[b]
»

href=
“”

- این عبارت مخفف کلمه ی hypertext value هست. هر چیزی که در بین علامت نقل قول (” “) این دستور بعنوان مقدار قرار بگیرید، آدرس لینک ما خواهد بود.


توجه: شاید از خودتان بپرسید که چرا بجای عبارت
bloginfo(’url’)
، آدرس
http://localhost/wordpress
را بعنوان مقدار
href=” “
قرار ندادیم. دلیلش کاملاً واضح است، بدین خاطر که در صورتی که شما
http://localhost/wordpress
را بعنوان مقدار قرار دهید ، حتی اگر این پوسته بروی یک وب سایت قرار بگیرد. هنگامی که بروی عنوان وبلاگ آن سایت برویم ، بجای آوردن آدرس صفحه ی اصلی آن سایت، آدرس
http://localhost/wordpress
را به ما خواهد داد.


حال از این توضیحات بگذریم، خط کد شما به صورت زیر باید باشد:

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

یعنی: من با آوردن تگ <
a
>
امکان لینک را آغاز کردم. سپس آدرس لینک را صفحه ی اصلی وبلاگم قرار دادم. برای اینکار من از تابع
PHP
یعنی
bloginfo(’url’)
استفاده کردم، تا آدرس و یا
url
وبلاگم را صدا بزنم. در آخر هم اسم لینک را با آوردن
<?php bloginfo(’name’);
همان عنوان وبلاگم قرار دادم. تگ لینک را نیز با عبارت
<a/>
بستم.


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


با این سری آموزشی در جلسات بعد همراه باشید.[/b]

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
(آخرین ویرایش در این ارسال: 15-03-2012 03:44 PM، توسط Sobhan.)
15-03-2012 03:42 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #8
RE: آموزش ساخت پوسته ی ورد پرس!
کار با

Header Template (بخش ۲)

در این پست بخش پنجم از این سری آموزشی را پی خواهیم گرفت . این درس ادامه ی درس قبلی است. باز هم می گویم که اگر این سری را از ابتدا دنبال نکرده اید، از همین الان با مراجعه به پست اول همین موضوع درس اول و تمامی دروس قبلی را مطالعه کرده و سپس با ما همراه شوید. در ضمن از خودتان مطمئن شوید که دروس قبلی را خوانده و فهمیده اید(اگر کمی نیز کار کرده باشید که دیگر عالی است)
[align=CENTER DIR=RTL CLASS=ENTRY-TITLE][تصویر:  wp-php-theme.jpg][/align]
درس امروز ما آنچنان طولانی نیست ولی با بعضی از مهمترین تگ های بکار رفته در پوسته های وردپرس آشنا خواهید شد. با پایان پست امروز بخش header template به پایان می رسد، و در جلسات بعدی با بدنه اصلی و ساختار حلقه بیشتر آشنا خواهیم شد . اگر آماده اید درس را شروع کنیم….

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





نکته: به هیچ عنوان کدهایی که به شما گفته می شود را کپی و
Paste
نکنید و خودتان آنرا را تایپ کنید.



مرحله ی اول:


۱- برنامه ی Xampp را فعال کنید.
۲- فولدر پوسته هایتان ، که نامش را Tutorial گذاشته اید را باز کنید
۳- یک مرور گر وب باز کنید و در آن آدرس http://localhost/wordpress را تایپ کنید.(دلیل قرمز بودن
wordpress
را در جلسات گذشته گفته ایم).
۴- به فولدر پوسته بازگردید و فایل
index.php
ر

ادر
notepad
باز کنید
.


بعد از انجام مقدمات کار مرحله ی بعدی و یا اصل درس را شروع می کنیم:



مرحله دوم :


درون فایل
index.php
باید عبارت زیر را که از جلسه ی قبل کار کرده ایم، وجود داشته باشد:


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


حال به دور عبارت بالا تگ های <
h1
>
و
</h1>
را اضافه کنید. تگ
H1
به معنی heading 1 است. شش heading بطور کلی وجود دارند: H1, H2, H3, H4, H5, H6 . بطور پیش فرض،
H1
بزرگترین سایز
و
H6
کوچکترین سایز می باشد.


نکته: اگر بخواهیم به زبان ساده تگ
H1
را توصیف کنم، باید بگویم که در واقع تگ
H1
، یک سایز پیش فرض از فونت می باشد. یعنی اگر این تگ بدور یک نوشته ی ما قرار گیرد، همانگونه که در بالا گفته شد، نوشته ی ما بزرگترین سایز پیش فرض را می گیرد و اگر تگ
H6
قرار بگیرد، نوشته ی ما کوچکترین سایز پیش فرض را به خود می گیرد. دلیل اینکه می گوییم سایز ییش فرض این است که می توانیم در فایل
Style.css
این تنظیمات را تغییر داده و اندازه را با توجه به خواسته ی خودمان تغییر دهیم. که البته در جلسات بعد با اینگونه اعمال بیشتر آشنا می شوید.


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

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

تغییرات را
save
کرده و به مرورگر برگردید و آن را
refresh
کنید. مسلماً
عنوان وبلاگ (blog’s title) شما [/b]بزرگتر شده است. جالب است نه….



مرحله سوم:


در این مرحله قصد داریم تا توضیحات وبلاگمان (description[b]) را صدا بزنیم و یا فراخوانی کنیم، برای اینکار عبارت
<?php bloginfo(’description’); ?>
را درست در زیر عبارت
عنوان وبلاگ (blog’s title) تایپ کنید، حال کد شما باید بصورت زیر باشد:[/b]

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

تغییرات را ثبت کرده و صفحه را
refersh
کنید، مشاهده خواهید کرد که توضیح وبلاگتان در زیر لینک
عنوان وبلاگتان ([i]blog’s title) اضافه شده است. این نکته را نیز بگوییم که شما می توانید [/b]توضیحات وبلاگتان ([i]description
)[/b] را در بخش مدیریت وردپرس تنظیم کنید.

توضیح آنچه اتفاق افتاده است:


»

<?php
- شروع کدهای
php


»

bloginfo(’description’)

-
اطلاعات وبلاگتان را (بویژه در اینجا
توضیحات وبلاگتان (description
) را) صدا می زند. (به دلیل اینکه مقدار
bloginfo(’’)
را
description
قرار داده ایم، فقط توضیحات وبلاگتان ([i]description
)[/b] فراخوانی می شود).
[b]
»
; - صدا زدن توضیحات وبلاگ (description
) را متوقف می کند.

»

?>
- پایان کدهای
php




مرحله ی چهار:

در این مرحله برای شما یک تگ جدید و البته بسیار مهم را به نام
div
را معرفی می کنیم:


بدور کدهایی که تاکنون نوشته اید تگ های <
div
>
و
<
/div
>
را تایپ کنید، در نتیجه خواهیم داشت:


<div>

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


</div>

تغییرات را ثبت کرده و صفحه را دوباره
refresh
کنید. نباید هیچ تغییری را مشاهده کنید.


شاید خیال کنید که تگ
div
یک تگ بلا مصرف است، اما در جلسات بعد علاوه بر اینکه بر روح سازنده ی آن درود خواهید فرستاد، کاربرد آنرا نیز بیشتر خواهید فهمید. ولی به طور اجمالی در اینجا در مورد این تگ توضیحاتی خواهیم داد: ما این تگ را قرار دادیم تا لینک
عنوان وبلاگ (blog’s title) و [/b]توضیحات وبلاگ([i]description)[/b] را از هر چیز دیگر موجود در صفحه جدا کنیم، حال اگر شما از این تگ استفاده نکنید. هیچ محتوایی از پوسته ی شما مجزا نخواهد بود و در حقیقت همه چیز تو در تو خواهد بود. شما با قرار دادن تگ
div
به دور کدهای بالا در حقیقت یک باکس مخفی بدور آن ایجاد کرده اید که علاوه بر جدا کردن محتوای داخل آن از سایر عناصر موجود در صفحه، می توانید بعد ها در فایل
style.css
برای باکس های مخفی (تگ
div
) ویژگی تعریف کنید و در حقیقت سایت تان را بسازید. کارهایی نظیر حاشیه دادن ، لایه گذاری ، لبه گذاشتن ، عکس پس زمینه ، رنگ پس زمینه و غیره.. را می توانید بروی این تگها اعمال کنید.

ممکن است این سوال برای شما پیش بیاید که با توجه به اینکه تگ باکس مخفی یا همان
div
را برای بسیاری از اجزای صفحه بکار می بریم، چگونه می توان بعدها در فایل
Style.css
یک تگ

div
مخصوص را مورد تغییر قرار داد. جواب شما در مرحله ی پنجم قرار دارد…




مرحله ی پنجم:


مقدار
id=”header”
را به تگ
div
اضافه کنید مانند زیر:


<div id=”header”>



تغییرات را ثبت کرده و صفحه را
refersh
کنید.


البته الان ، باز هم هیچ تغییر را مشاهده نخواهید کرد. ما یک
id
را به تگ

div
اضافه کردیم. دلیل اینکه ما به این تگ
div
یک
id
اضافه کردیم این است که بتوانیم بعداً در فایل
Style.css
تگی با مقدار آی دی [b]
header
را مورد تغییر قرار دهیم، زیرا تگ های

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


نکته: اگر از این به بعد واژه ی باکس مخفی را بکار بردیم بدانید که منظورمان همین تگ
div
است.


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

اگر حرف من را باور نمی کنید، فایل
index.php
یک پوسته (نه پوسته ای که می خواهیم بسازیم) را گشوده و مشاهده کنید که این تگ

چقدر زیاد بکار رفته است.


با سری آموزشی ساخت پوسته ی وردپرس در جلسات بعد همراه باشید.

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
15-03-2012 03:46 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
Sobhan آفلاین
تنها ترین پسر سایت
*
کاربر ویژه

ارسال‌ها: 949
تاریخ عضویت: Oct 2011
اعتبار: 8
ارسال: #9
RE: آموزش ساخت پوسته ی ورد پرس!
در این درس به آموزش

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


امیدوارم که این کار را کرده باشید. بگذریم…..

[b]بیشتر بدانید:
اگر کمی با PHP
کار کرده باشید مطمئناً با حلقه ها آشنا هستید. حلقه ها یکی از اجزای مهم در برنامه نویسی می باشند. بوسیله ی حلقه ها قادر هستید تا یک فرمان را به اندازه ای که مایلید، تکرار کنید. روشهای مختلفی برای ایجاد حلقه وجود دارد، که البته در بحث امروز ما نمی گنجد. ما در این درس به کمک حلقه ها ورودی های سایت یا پست های سایت را وارد صفحه کنیم، اگر کمی فکر کنید، متوجه خواهید شد که حلقه ای که استفاده خواهیم کرد برای کجا و چه استفاده خواهد شد.


[تصویر:  wp-php-theme.jpg]

تا اینجای کار، ما به شما موارد زیر را درس داده ایم:


۰[/b]
قوانین ، ساختار ، و سلسله مراتب در پوسته های وردپرس.

[b]۰

هر صفحه ای از چه چیز تشکیل شده است.

۰
چگونه پوسته ی را نصب کنیم.

۰
چگونه عنوان وبلاگمان را صدا بزنیم و سپس از آن یک لینک بسازیم.

۰
چگونه توضیحات وبلاگ را صدا بزنیم و
header
را از اجزای دیگر مجزا کنیم.



چون صفحه طولانی می شود برای شروع درس و آشنایی بیشتر با حلقه ها به ادامه مطلب مراجعه کنید…




[/font]

[font=Tahoma]
همانطور که می دانید ، باید ابتدا برنامه ی
Xampp
را راه‌اندازی کنید. فولدر
tutorial
را در بخش پوسته های وردپرس بگشایید، یک مرورگر وب باز کنید و آدرس
http://localhost/wordpress
را در آن تایپ کنید، و در آخر فایل
index.php
را در
notepad
هم باز کنید.



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

[align=CENTER DIR=RTL][تصویر:  indexphp.gif][/align]

بیاد داشته باشید، هر کدی را تایپ کنید و هیچ چیز را کپی نکنید.





مرحله ی اول:



یک تگ
div
(باکس پنهان) را

زیر ناحیه
header
اضافه کنید و به
id
آن مقدار
“container”
را

نسبت دهید، مانند زیر:


<div id=”container”>

</div>


این
div
برای چه هست؟ این تگ برای این هست که محتوای اصلی و یا همان پست های سایت را از هر چیز دیگری، که بعد از آن می آید، جدا کند. چیزهایی مانند
Foote
r و
Sidebar





مرحله ی دوم:



کد زیر را بین تگ

باکس مخفی ای که مقدار
id
آن
container
هست، اضافه کنید. کد های زیر را بطور دقیق وارد کنید. اگر هرگونه ایرادی را مشاهده کردید، دوباره کدهایتان را چک کنید:


<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>


از این مرحله، مفاهیم برایتان آسانتر خواهد بود، تا متوجه شوید که کد نوشته شده چه اعمالی را انجام خواهند داد.



آنچه که شما تایپ کردید، یک حلقه (
The Loop
) در وردپرس هست. قبل از اینکه این کدها را شرح بدهم. شما باید چیزی شبیه به عکس زیر داشته باشید:

[align=CENTER DIR=RTL][تصویر:  the-loop.gif][/align]

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

بجای
Spacebar
استفاده کردم. بعدها که صفحه ی شما پر از کد شد، قدر اینکار را خواهید دانست.



چه چیز اتفاق افتاد؟



»

if(have_posts())
[/b]
- یک عبارت شرطی است و چک می کند که شما آیا پستی دارید یا خیر؟ در حقیقت این کد را می توان اینگونه خواند: «اگر پستی وجود داشت اجرا کن…»

[b]
»

while(have_posts())

- این کد همان حلقه ی مورد نظر ماست و معنی آن می شود: «تا زمانی که پستی وجود داشت،

the_post()



را اجرا کن».


»

the_post()

- پست ها را برای نشان دادن صدا می زند.

[b]
»

endwhile;

- همان قانون اول است – این عبارت حلقه ی

while()
[/b]
را می بندد.

[b]
»

endif;

- شرط

if()

را می بندد.(قانون اول)



توجه: لازم نیست تمام کدهایی را که بازکرده ام، حتماً در آخر ببندیم بعضی از کدها از دو بخش ساخته نشده اند. برخی کدها می توانند خودشان، خودشان را ببندند، مثل:

have_posts()

یا

the_post();

. کمی که با این مباحث بیشتر آشنا شوید، به راحتی می توانید بفهمید که چه کدی نیاز به بسته شدن دارد، و چه کدی نیازمند این عمل نیست.





مرحله سوم:



در درس قبلی، شما یاد گرفتید که چطور
عنوان وبلاگتان (blog’s title)
را بوسیله ی
bloginfo(’name’)
صدا بزنید. حالا، باید برایتان آسانتر باشد که چگونه
عنوان پست ها (
post titles
) را صدا بزند. برای اینکار در بین حلقه ها (
The Loop
) عبارت
<?php the_title(); ?>
را بعد از

the_post(); ?>
و قبل از
<?php endwhile; ?>
تایپ کنید. مانند زیر
:
[تصویر:  the-title.gif]

تغییرات را در فایل
index.php
ثبت کنید، مرورگرتا را
refresh
نمایید. شما باید عنوان
hello World
را در زیر توضیحات وبلاگتان مشاهده کنید. البته در حالت پیش فرض، وبلاگ شما تنها یک پست دارد. البته شما می توانید چندین پست را خودتان به وردپرس اضافه کنید، تا چند عنوان مختلف را مشاهده کنید. برای مثال من خودم چندین پست به وردپرس اضافه کرده ام و چون عنوان پست ها را همگی
hello world
گذاشته ام، شما یک خط طولانی شامل عبارت های
hello world
را مشاهده خواهید کرد.

[تصویر:  hello-world.gif]



مرحله چهارم
:



الان عنوان پستهای شما قابل رویت است ولی امکان لینک ندارند. برای فعال کردن آدرس و یا لینک عنوان پست ها باید….. بیاد بیاورید که چگونه لینک را برای عنوان وبلاگ، فعال کردیم. دقیقاً مانند همان روش، تگ

<a href=”#”>

و

</a>

را بدور کد


<?php the_title(); ?>

اضافه می کنیم



فایل
index.php
را
save
کنید و سپس صفحه را
refresh
نمایید. حالا عنوان پست های شما همگی حالت لینک دارند، اما لینک ها به هیچ جای خاصی نمی روند. برای اینکه برای هر پست آدرس درستی را به هر لینک بدهیم، باید عبارت

the_permalink()

را بجای
# قرار دهیم. مانند عکس زیر:


<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>




the_permalink()

یک تابع از
php
است، که آدرس یا مکان هر پست را صدا می زند. صفحه را
save
کنید و سپس صفحه ی مرورگر را
refresh
نمایید . نشانگر موس را بروی یکی از عنوانهای
Hello World
برده و به
Stutus bar
نگاه کنید. خواهید دید که در
Status

bar
آدرس مطلب شما را نشان داده خواهد شد، مانند عکس زیر:

[align=CENTER DIR=RTL][تصویر:  status-bar-address.png][/align]

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


/h2


>
بدور کد لینکتان اضافه کنید. یعنی:

[align=LEFT DIR=LTR]<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>[/align]

بیاد بیاورید
H1
را که ما برای عنوان وبلاگمان استفاه کردیم. این
heading
صفحه ی وب شما هست.

حالا لینک های مطالب شما
sub-headings
هستند. الان باید تمام لینک پست های شما در خطوط خودشان باشند. فایل
index.php
را
save
کرده و مرورگر را
refersh
کنید تا تغییرات برایتان نمایان شود.

[تصویر:  post-title-heading.gif]

در پایان باید صفحه ی کد شما به شکل زیر باشد:
[تصویر:  end-lesson-5.gif]

خوب درس ما به پایان رسید.



توجه: اگر شما خوب منظور من را متوجه نشده اید. باید چندین پست مختلف به وردپرس تان اضافه کنید(مهم نیست که محتوای آن چه باشد) تا پوسته تان به درستی آزمایش شود. برای اینکار به بخش مدیریت وردپرس خود رفته و در زیر مجموعه ی نوشتن[/b]، چندین پست اضافه کنید. پیشنهاد می کنم تا عنوان هر پست را منحصر به فرد گذاشته تا کمتر دچار سردرگمی شوید.



با آموزشهای بعدی از سری آموزشی ساخت پوسته ی وردپرس با ما همراه باشید. تا بعد…..

[تصویر:  AA.gif]


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

Dragon Hackers
Made By: SobhaN HackeR
On:MARCH 2008

میگویند زندگی را بپذیر، هر چند امواج خروشانش تو را به دوردست ترین جزیره ببرد

با رنج عمیق درونی آدمی از دیگران جدا می شود و والا می شود. فردریش نیچه

اشکهای دیگران را مبدل به نگاههای پر از شادی نمودن بهترین خوشبختی هاست . بیچاره آنی که خنده را مبدل به گریه کند.

برخی پست های مفید:
آموزش ساخت پوسته ورد پرس!(اینجا کلیک کنید!)
بانک ترفند های ویندوز ویستا!(اینجا کلیک کنید!)
15-03-2012 03:49 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
hatef آفلاین
کاربر سایت
*
کاربر سایت

ارسال‌ها: 1
تاریخ عضویت: Jun 2013
اعتبار: 0
ارسال: #10
RE: آموزش ساخت پوسته ی ورد پرس!
سلام ممنون از همت بلند شما.
داداش نمی دونم شاید نباید اینجا بپرسم ولی با فروم آشنا نیستم و اگه بدجاست پوزش
من یه پوسته ی اچ تی ام ال دارم برای اینکه بتونم بعنوان یه پوسته ی ورد پرس ازش استفاده کنم همین مراحل را باید طی کنم یا اصلا مطلب یه چی دیگست. ممنون
(توضیح اینکه: مدیریت محتوا ورد پرس نصب شده حالا پوسته ی خودم را می خوام آپ کنم؟)
24-06-2013 03:01 AM
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان

اخبار فناوری اطلاعات | نرم افزار املاک | نرم افزار رستوران | نرم افزار تاکسی سرویس | نرم افزار رستوران | دانلود نرم افزار مطب | دانلود نرم افزار تاکسی سرویس | مجله پزشکی آسان طب | اتوماسیون پزشکی | نرم افزار دفترچه تلفن نرم افزار چاپ چک نرم افزار رستوران نرم افزار فست فود نرم افزار کافی شاپ نرم افزار تاکسی سرویس نرم افزار نمایشگاه خودرو نرم افزار املاک نرم افزار هتلداری نرم افزار مطب نرم افزار دندانپزشکی نرم افزار انبارداری نرم افزار حسابداری فروشگاه نرم افزار وکالت مجله اینترنتی پارسی وان | مجله اینترنتی زیگیل | خرید بک لینک | خرید رپورتاژ | سینما تئاتر مای استیج | یک مهاجر | دنیای مهاجرت | مجله گردشگری کاروان | وردپرس دانلود | مجله تفریحی تندیس فان | نرم افزار Software | جوک جدید | اخبار هنر | اخبار کامپیوتر | سایت پزشکی | فروشگاه اینترنتی | سایت خبری | اندروید سه | مجله کامپیوتری | تم کد | مجله اینترنتی وبدون | سایت تفریحی تک لایو | مجله سرگرمی سایت پزشکی دکتر طب | فرتکست | مجله پزشکی نت سلامت | کافه ایرونی | مجله خندانک | مجله اینترنتی فان استار | مجله من | مجله اینترنتی دونیمه | مجله اینترنتی بردیا | فاینال مد | فرهنگیا | نامبروان | جان نو | مگفر | مجله 24 | نیمچه | تک پدیا | آیناز وب | مطالب بیست | میهن اسکای | نیک آنلاین | شینار | وطنی ها | طب جدید | هوای تازه | آاقای گل | برترین مطالب | دایی رضا | فارس پدیا | آجودانیه | چارشنبه | فانیفا | قارپوز | گوهرمند | گل بهار | جهان من | جوان امروز | کالچر | مه آذین | مجله سبز | مگناب | دنیای نت | نیک اندیشه | نیکاندوست | نیک پاتوق | ازبک | پارمینو | پیک آبی | پورتال من | راز آلود | روسپید | رشد نگر | رویای زندگی | شورانگیز | سیمای وب | نتیها | تاپکده | وب دوستان | ویکی وان | یکناز | زرچوب | زردقناری | عصرطلایی | فرتورز | آموزش گیتار | مایادانلود | | دکتر CMS | سایت آموزش گیتار | رایان درمان | پارسیان گشت | ایران کافه | گیتی بوک | مجله فراتوریسم | فراتوریسم | دکتر آسان دنت | آسان دنت | مجله گردشگری افراگشت | افراگشت | هشت گام | فرکافی | میهن تاج | مجله پزشکی رایان درمان | موج سینما | تیزباد | برفانک | کافه داران | کینگ دانلود | هتل آپارتمان مشهد