چگونه برای وردپرس پوسته بسازیم؟

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

​

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

عنوان درس : معرفی مفاهیم
• شروع درس :
در این درس مباحث زیر را تحت پوشش خود قرار خواهیم داد.
» قوانین اصلی
» زبان ویژه / اصطلاحات مخصوص
» سلسله مراتبی بودن
» قوانین اصلی: سه قانون اصلی که باید به یاد بسپارید:
قانون اول : هر تگی را که باز کرده اید ، باید ببندید.

​

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

​

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

​

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

• 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 محسوب می شود.
۵- Page : یک نوع خاص از Post که در زیر مجموعه ی دسته ها (Category) نیز قرار نمی گیرد. Page ها از گروه Post سایت شما مجزا هستند. در زبان فارسی(بهتر است بگوییم در وردپرس فارسی) Page را همان برگه معنی کرده اند.
توجه : در وردپرس Page و page دو چیز مختلف هستند. یک P و p بین آنها تفاوت بزرگی را ایجاد می کند ، که در آینده بیشتر با این تفاوت آشنا می شویم.
» سلسله مراتبی بودن:
شکل زیر به راحتی به شما نشان می دهد که ، سیستم وردپرس به جستجوی چه فایلهایی می گردد. البته در عکس زیر بعضی از فایلها آورده نشده اند . من تنها ۶ فایل از ۱۳ فایل موجود را برایتان لیست کرده ام. با این فایلها در درس های آینده بیشتر آشنا خواهیم شد.

​

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

 

چگونه برای وردپرس پوسته بسازیم؟ (بخش دوم)



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

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

​

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

header ، index ، sidebar و footer
» و اما Header Template File چیست؟
عنوان وبلاگ شما (blog’s title) و توضیحات وبلاگ تان (description) در این فایل قرار می گیرد. معمولاً Header Template File در تمامی صفحات وبلاگ به یک صورت و بدون تغییر باقی می ماند.

​

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

​

» Sidebar Template File چیست؟
توسط این بخش ، برگه ها (Page links listing) ، دسته ها (Category) ، آرشیو (archive links listing) ، پیوندها (blogroll listing) و…. وبلاگتان کنترل می شود . (در مثال گفته شده سایدبار (sidebar) شما در سمت راست قرار گرفته دارد ، در حالی که این تنها یک مثال است ، سایدبار شما هر جایی می تواند باشد.)
توجه : ابزارک ها (Widgets) شما نیز توسط Sidebar Template File کنترل می شوند.

​

» و در آخر Footer Template File چیست؟
این template file شبیه بخش header.php و یا همان Header Template File می باشد. فوتر (Footer) معمولاً از صفحه ای به صفحه ی دیگر ثابت می ماند . شما هر چیزی را می توانید در این فایل قرار دهید ، اما معمولاً داخل این فایل اطلاعات کپی رایت نوشته می شود.​

​

حالا به من اجازه دهید تا توضیح بدهم که چرا فایل index.php در عکس بالا با رنگ قرمز مشخص شده است . در مثال بالا index.php با رنگ قرمز مشخش شده است تا به شما نشان دهد که این قسمت یک بخش متغیر است و به هر صفحه از وبلاگ شما بستگی دارد.پس باید متوجه شده باشید که بخشهای Footer ، Header و sidebar که با رنگ سیاه مشخص شده اند معمولاً قسمتهای ثابتی هستند.
اگر شما به داخل صفحات تنهای سایت خود بروید (single post) چهار template files خواهید داشت ، شامل : header، single ، sidebar و footer
اما اگر نمی دانید که صفحات تنها (single) چه هستند باید بگویم ، همان صفحاتی که ادامه ی مطلب در آن نوشته می شود، برای مثال شما که همین الان در حال خواندن این مطلب هستید در یک صفحه ی تنها (single) قرار دارید . در صفحات تنها امکان نظر گذاشتن نیز وجود دارد.

​

درس کوتاه امروز ما به پایان رسید

 

چگونه برای وردپرس پوسته بسازیم؟ (بخش سوم)





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

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

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


● مرحله ی اول: باز و فعال کردن برنامه ی Xampp
به فولدر اصلی این برنامه بروید. My Computer > xampp و (یا هر جای دیگری که این برنامه را نصب کرده اید.)
بروی xampp-control.exe کلیک کنید . پنجره ای با حالت pop up باز خواهد شد. آپاچی (Apache) و Mysql را اجرا کنید. برای اینکار شکل برنامه باید مانند تصویر زیر شده باشد:

​

حال موتور آپاچی و MySql روشن شده و آماده برای کار هستند. برنامه را کوچک کنید.
● مرحله ی دوم : ساخت یک فولدر برای پوسته
به بخش پوسته های وردپرس بروید ، یعنی آدرس زیر:
xampp/htdocs/wordpress/wp-content/themesدر این مکان فولدری بنام tutorial بسازید. به همین سادگی…
● مرحله ی سوم: ساخته فایل index.php و style.css
برنامه ی notepad یا هر ویرایشگر متن مورد علاقه ی خود را باز کنید.
فایلindex.txt را دانلود کرده و هرآنچه داخل این فایل هست را کپی کرده و در برنامه ی notepad بچسبانید (paste کنید.)
بعد از اینکار فایل notepad را درون پوشه ی tutorial بنام index.phpذخیره کنید.

​

دوباره ی یک notepad جدید باز کنید (باید کاملاً خالی باشد) . در همان حالت کاملاً خالی فایل notepad را با نام Style.css درون فولدر tutorial ذخیره کنید. حال پنجره های notepad را ببندید.
بعد از این اعمال شما درون این فولدر باید فایلهایی با نام های style.css و index.php داشته باشید.

​

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

​

» Doctype - این عبارت نشان می دهد که شما از چه نوع کدی در پوسته تان استفاده کرده اید .فهم Doctype زیاد اهمیت ندارد . من خودم ویژگیهای Doctype را تعیین کردم ، بنابراین شما نیازی نیست که در این مورد زیاد فکر کنید.
» <html> - این تگ نشان می دهد که صفحه ی وب شما از کجا شروع می شود.
» <head> - این تگ به ما نشان می دهد که سر (head) صفحه ی وب ما از کجا شروع می شود. هر صفحه ی وبی شامل یک body و head می باشد. </head> تگ به شما نشان می دهد که تگ head کجا تمام می شود.
<?php bloginfo(’stylesheet_url’); ?> یک تابع (function) هست که صدا می زند یا فرا می خواند برای مکانی که فایل style.css در آن قرار دارد (البته در همان فولدر که در اینجا فولدر tutorial می شود) بنابراین پوسته ی ما می تواند به آن و یا هر استایل دیگری برای صفحه ی وب مان لینک بدهد . هرگاه کدی قرار بگیرد بین عبارت های <?php و ?> این قسمت از کد زبان PHP محسوب می گردد که با گروه دیگر کدهای من تفاوت دارد . در زبان php عبارت <?php نشان از شروع و عبارت?> نشان دهنده ی پایان کدهای پی اچ پی می باشد.
بنابراین :
» <?php - یعنی شروع کدهای php
» bloginfo(’stylesheet_url’) - صدا می زند برای مکانی که style.css قرار دارد.
» ; - صدا زدن یا فراخواندن برای Style.css را متوقف می کند . سی می کالون(;) یک راه برای بستن گروهی از کدهای php هست . بنابراین هرگاه که عبارت ; را مشاهده کردید ، بدانید که یک دستوری از پی اچ پی پایان یافته است.
» ?> - یعنی پایان کدهای php
توجه: دقت کنید که هرگاه عبارت ؟> بیاید ،یعنی کدهای PHP تمام شده است . در صورتی که اگر ; باید یعنی اینکه یک خط از دستورات PHP پایان یافته است. برای پایان دادن به هر دستور از PHP یک سی می کالون می آید در حالی که ؟> برای کل دستورها بکار می رود.
ادامه بدهید…
» <body> - این تگ نشان می دهد که بدنه ی اصلی صفحه ی وب ما از کجا شروع می شود. بدنه شامل هر چیزی می شود که ما بروی صفحه ی وب می بینم و می خوانم . شمایی که در حال خواندن این آموزش هستید یعنی در حال نگاه کردن به بدنه ی صفحه ی وب این صفحه هستید . تگ </body> هم نشان دهنده ی این است که بدنه صفحه ی وب پایان یافته است.(مشخص است دیگر)
» </html> - این تگ نشان دهنده ی این است که صفحه ی وب من تمام شده است و هیچ چیز دیگری بعد از آن نیست.
● مرحله ی چهارم : هر چیزی که داخل فایل styie.txt هست را به درون فایل style.css که در فولدر tutorial قرار دارد ، کپی و پیست کنید و تغییرات را save نموده و صفحه را ببنید.
● مرحله ی پنجم : پوسته تان را منتشر کنید
برای اینکار یک مرورگر را باز کنید
درون آدرس بار مرورگرتان تایپ کنید عبارت :
http://localhost/wordpress /wp-adminو سپس به داخل بخش مدیریت وردپرس بروید.
(wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس گذاشته اید.)
هنگامی که داخل بخش وردپرس شدید ، به بخش مدیریت پوسته ها بروید و پوسته ی Tutorial را فعال نمایید.
توجه کنید که پوسته ی شما هنوز هیچگونه عکس بند انگشتی (thumbnail) ندارد. و باکس آن خالی از عکس می باشد . عکس آن به صورت زیر باید باشد:

​

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

​

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

 

چگونه برای وردپرس پوسته بسازیم؟ (بخش چهارم)




کار با Header Template​

اگر با این سایت همراه بوده اید، حتماً مطلع هستید که مدتی پیش سری آموزشی ساخت پوسته ی برای وردپرس را شروع کردیم ، حال در این پست چهارمین بخش از این سری آموزشی را به شما یاد خواهیم داد.
در جلسه ی قبل، من به شما نشان دادم که چگونه در بخش کنترل برنامه Xampp ، آپاچی و MySQL را فعال کنید. پوسته تان را نصب نمایید، و در آخر شما را کمی با PHP آشنا کردیم. امروز ما با PHP ادامه داده و به شما یاد خواهیم داد که چگونه عنوان وبلاگتان (blog’s title) را صدا بزنید یا فراخوانی کنید.
بعلت طولانی شدن صفحه برای خواندن پست به ادامه مطلب مراجعه کنید.

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

​

فایلهای index.php و style.css باید با فایلهایindex.php و Style.css پر شده باشند(یعنی باید محتویات داخل آنها یکی باشد).
● مرحله دوم:
- یک پنجره از مرورگر وب باز کنید. سپس به آدرس http://localhost/wordpressبروید . شما باید یک صفحه ی خالی مشاهده کنید ، چون شما یک پوسته ی خالی را در جلسه ی قبل نصب کردید.
(wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس انتخاب کرده اید).
- به فولدر پوسته هایتان باز گردید و فایل index.php در notepad باز کنید. برای اینکار بروی Index.php راست کلیک کرده ، properties را انتخاب نموده و بروی change کلیک کنید ، سپس notepad یا ویرایشگر متن دلخواه تان را انتخاب کنید. من به شخصه notepad را انتخاب کردم . در آخر نیز بروی ok کلیک کنید.

​

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

​

● مرحله ی سوم:
شما باید به محتویات داخل فایل index.php دقت کنید. حال برای شروع:
عبارت <?php bloginfo(’name’); ?> را در بین تگ های <body> و </body> تایپ کنید و تغییرات را save نمایید.

​

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

​

◊ حال توضیح و آنچه اتفاق افتاده است؟
شما یک خط از کدهای PHP را درون فایل index.php و درون تگهای body از صفحه ی وب تان اضافه کردید. این یک خط اطلاعات وبلاگتان را صدا می زند. در حقیقت دستور bloginfo() وظیفه ی صدا زدن و یا فراخوانی اطلاعات وبلاگ شما را دارد و از آنجایی که داخل پرانتز مقدار “name“ را وارد کرده ایم ، پس این دستور صرفاً نام وبلاگتان را صدا می زند.
نکته۱: نامی که شما بعنوان عنوان وبلاگتان قرار دادید، در بخش مدیریت وردپرس قابل تنظیم و تغییر است.
نکته۲: چون bloginfo() یک دستور PHP هست بنابراین باید بین عبارت <?php و ?> قرار گیرد.
» <?php - شروع کدهای php
» bloginfo(’name’) - اطلاعات وبلاگتان را فراخوانی می کند البته در اینجا عنوان وبلاگتان، فراخوانی می شود.
» ; - سیمی کولون صدا زدن(فراخوانی) اطلاعات وبلاگ را متوقف می کند.
» ?> - پایان کدهای php
درصورتی که شما هرگونه تغییری در فایل index.php ایجاد کردید، آنرا save کنید و در آخر هم صفحه ی مرورگر وب را refresh کنید تا تغییرات را مشاهده نمایید.
● مرحله چهارم:
اگر دقت کرده باشید عنوان وبلاگتان(blog’s title) قابل دیدن است، ولی قدرت لینک ندارد، یعنی قادر نیستم که بروی عنوان وبلاگ کلیک کنیم تا به صفحه ی اول سایت برویم.
برای فعال کردن لینک نوشته عنوان وبلاگ، باید از یک تگ XHTML کمک بگیریم. برای اینکار به فایل index.php بروید.
تگهای <a href=”#”> و </a> را به همان خط اضافه کنید. خط جدید شما بایستی به صورت زیر در بیاید:

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

سپس به مروگرتان بازگردید و صفحه را refresh کنید. هم اکنون باید امکان لینک را برای عنوان وبلاگتان مشاهده کنید. جالب است نه….

​

حالا، یک لینک تشکیل داده اید، اما لینکی هست که به هیچ کجا نمی رود، زیرا بجای آدرس درست آن، از # استفاده کرده اید. از این پس اگر بخواهید برای عنوان وبلاگتان، یک لینک بسازید، این روش را بکار بگیرد. یعنی:
عبارت <?php bloginfo(’url’); ?> در بین نقل قول (‘ ‘) دستور href= قرار دهید.
تغییرات را save کنید، الان باید خطی مانند زیر را داشته باشید:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
برگردید به مرورگر و صفحه را refresh کنید، وقتی که بروی عنوان سایت بروید، Status bar باید به شما آدرس http://localhost/wordpress را به شما نشان می دهد(دلیل اینکه WordPress با رنگ قرمز مشخص شده است را دیگر نمی گویم).

​

وقتی که بروی لینک مورد نظر ما یعنی همان عنوان وبلاگ کلیک کنید، شما به صفحه ی اول وبلاگ تان فرستاده خواهید شد.
از آنجایی که در صفحه ی اول قرار دارید با کلیک بروی عنوان وبلاگ نیز ، همان صفحه ی اول را مشاهده خواهید کرد. اما بدانید که یک تفاوت عظیم بین این دو عبارت # وhttp://localhost/wordpress وجود دارد. شما با این نکات، در درس های بعدی بیشتر آشنا خواهید شد.
◊ حال توضیح و آنچه اتفاق افتاده است؟
شما عنوان وبلاگتان را داخل یک لینک فعال کردید و به صفحه ی اول تان یا همان صفحه ی خانگی وبلاگتان لینک دادید:
» bloginfo(’url’)- اطلاعات وبلاگ شما را فراخوانی می کند. مخصوصاً در اینجا که آدرس یا URL صفحه ی اصلی تان را فراخوانی می کند.
» <a> - یک تگ از XHTML هست برای لینکدار کردن یک عبارت مخصوص (عبارتی که بین تگ های <a> و </a> قرار می گیرد)
» </a> - تگی است که امکان لینک دار شدن یک نوشته را می بندد . در صورت عدم استفاده از این تگ ، صفحه ی وب شما نمی داند که نوشته ای که لینکدار کرده اید کجا پایان می یابد و در این صورت یک لینک بزرگ خواهیم داشت، یعنی تمام نوشته های وبلاگ به یک آدرس لینک دار خواهند شد. همچنین قانون اول را بیاد بیاورد، هرچیزی را که باز کرده اید، باید ببندید.
» href=“” - این عبارت مخفف کلمه ی hypertext value هست. هر چیزی که در بین علامت نقل قول (” “) این دستور بعنوان مقدار قرار بگیرید، آدرس لینک ما خواهد بود.
توجه: شاید از خودتان بپرسید که چرا بجای عبارت bloginfo(’url’) ، آدرس http://localhost/wordpress را بعنوان مقدار href=” “ قرار ندادیم. دلیلش کاملاً واضح است، بدین خاطر که در صورتی که شما http://localhost/wordpressرا بعنوان مقدار قرار دهید ، حتی اگر این پوسته بروی یک وب سایت قرار بگیرد. هنگامی که بروی عنوان وبلاگ آن سایت برویم ، بجای آوردن آدرس صفحه ی اصلی آن سایت، آدرس را به ما خواهد داد.
حال از این توضیحات بگذریم، خط کد شما به صورت زیر باید باشد:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
یعنی: من با آوردن تگ <a> امکان لینک را آغاز کردم. سپس آدرس لینک را صفحه ی اصلی وبلاگم قرار دادم. برای اینکار من از تابع PHP یعنی bloginfo(’url’) استفاده کردم، تا آدرس و یا url وبلاگم را صدا بزنم. در آخر هم اسم لینک را با آوردن <?php bloginfo(’name’); همان عنوان وبلاگم قرار دادم. تگ لینک را نیز با عبارت </a> بستم.
شما امروز کمی با XHTML نیز آشنا شدید. خوب فکر کنم، برای درس امروزمان کافی باشد. اگر نگرانید که چرا اینقدر کند پیش می رویم باید بگویم که شما در ابتدای کار هستید و هنگامی که بیشتر آشنا شدید، سرعت درس مان نیز بیشتر خواهد شد.

 

چگونه برای وردپرس پوسته بسازیم؟ (بخش پنجم)





کار با Header Template (بخش ۲)

در این پست بخش پنجم از این سری آموزشی را پی خواهیم گرفت . این درس ادامه ی درس قبلی است.
درس امروز ما آنچنان طولانی نیست ولی با بعضی از مهمترین تگ های بکار رفته در پوسته های وردپرس آشنا خواهید شد. با پایان پست امروز بخش 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) شما بزرگتر شده است. جالب است نه….
● مرحله سوم:
در این مرحله قصد داریم تا توضیحات وبلاگمان (description) را صدا بزنیم و یا فراخوانی کنیم، برای اینکار عبارت <?php bloginfo(’description’); ?> را درست در زیر عبارت عنوان وبلاگ (blog’s title) تایپ کنید، حال کد شما باید بصورت زیر باشد:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
تغییرات را ثبت کرده و صفحه را refersh کنید، مشاهده خواهید کرد که توضیح وبلاگتان در زیر لینک عنوان وبلاگتان (blog’s title) اضافه شده است. این نکته را نیز بگوییم که شما می توانید توضیحات وبلاگتان (description) را در بخش مدیریت وردپرس تنظیم کنید.
◊ توضیح آنچه اتفاق افتاده است:
» <?php - شروع کدهای php
» bloginfo(’description’) - اطلاعات وبلاگتان را (بویژه در اینجا توضیحات وبلاگتان (description) را) صدا می زند. (به دلیل اینکه مقدار bloginfo(’’) را description قرار داده ایم، فقط توضیحات وبلاگتان (description) فراخوانی می شود).
» ; - صدا زدن توضیحات وبلاگ (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) و توضیحات وبلاگ(description) را از هر چیز دیگر موجود در صفحه جدا کنیم، حال اگر شما از این تگ استفاده نکنید. هیچ محتوایی از پوسته ی شما مجزا نخواهد بود و در حقیقت همه چیز تو در تو خواهد بود. شما با قرار دادن تگ div به دور کدهای بالا در حقیقت یک باکس مخفی بدور آن ایجاد کرده اید که علاوه بر جدا کردن محتوای داخل آن از سایر عناصر موجود در صفحه، می توانید بعد ها در فایل style.css برای باکس های مخفی (تگ div) ویژگی تعریف کنید و در حقیقت سایت تان را بسازید. کارهایی نظیر حاشیه دادن ، لایه گذاری ، لبه گذاشتن ، عکس پس زمینه ، رنگ پس زمینه و غیره.. را می توانید بروی این تگها اعمال کنید.
ممکن است این سوال برای شما پیش بیاید که با توجه به اینکه تگ باکس مخفی یا همان div را برای بسیاری از اجزای صفحه بکار می بریم، چگونه می توان بعدها در فایل Style.css یک تگ div مخصوص را مورد تغییر قرار داد. جواب شما در مرحله ی پنجم قرار دارد…
● مرحله ی پنجم:
مقدار id=”header” را به تگ div اضافه کنید مانند زیر:
<div id=”header”>
تغییرات را ثبت کرده و صفحه را refersh کنید.
البته الان ، باز هم هیچ تغییر را مشاهده نخواهید کرد. ما یک id را به تگ divاضافه کردیم. دلیل اینکه ما به این تگ div یک id اضافه کردیم این است که بتوانیم بعداً در فایل Style.css تگی با مقدار آی دی header را مورد تغییر قرار دهیم، زیرا تگ های div زیادی وجود خواهند داشت و شما باید به گونه ای آنها را از یکدیگر متمایز کنید.
نکته: اگر از این به بعد واژه ی باکس مخفی را بکار بردیم بدانید که منظورمان همین تگ div است.
به گمانم درس امروز کوتاه بود، ولی با تگ بسیار مهمی آشنا شدید. اگر حرف من را باور نمی کنید، فایل index.php یک پوسته (نه پوسته ای که می خواهیم بسازیم) را گشوده و مشاهده کنید که این تگ چقدر زیاد بکار رفته است.

 

چگونه برای وردپرس پوسته بسازیم؟ (بخش ششم)


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

​

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

همانطور که می دانید ، باید ابتدا برنامه ی Xampp را راه‌اندازی کنید. فولدر tutorial را در بخش پوسته های وردپرس بگشایید، یک مرورگر وب باز کنید و آدرسhttp://localhost/wordpress را در آن تایپ کنید، و در آخر فایل index.php را در notepad هم باز کنید.
آنچه در جلسات قبل انجام داده ایم را می توانید در عکس زیر مشاهده کنید.

​

بیاد داشته باشید، هر کدی را تایپ کنید و هیچ چیز را کپی نکنید.
● مرحله ی اول:
یک تگ div (باکس پنهان) را زیر ناحیه header اضافه کنید و به id آن مقدار “container” را نسبت دهید، مانند زیر:
<div id=”container”>
</div>
این div برای چه هست؟ این تگ برای این هست که محتوای اصلی و یا همان پست های سایت را از هر چیز دیگری، که بعد از آن می آید، جدا کند. چیزهایی مانند Footer و Sidebar
● مرحله ی دوم:
کد زیر را بین تگ باکس مخفی ای که مقدار id آن container هست، اضافه کنید. کد های زیر را بطور دقیق وارد کنید. اگر هرگونه ایرادی را مشاهده کردید، دوباره کدهایتان را چک کنید:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
از این مرحله، مفاهیم برایتان آسانتر خواهد بود، تا متوجه شوید که کد نوشته شده چه اعمالی را انجام خواهند داد.
آنچه که شما تایپ کردید، یک حلقه (The Loop) در وردپرس هست. قبل از اینکه این کدها را شرح بدهم. شما باید چیزی شبیه به عکس زیر داشته باشید:

​

توجه کنید که خطوط درون باکس مخفی یا همان div را تو رفته تر نسبت به خطهای دیگر تایپ کرده ام. این کار را برای سازماندهی و تشخص دادن بهتر انجام دادم. اینکه شما فقط کدها را تایپ کنید، کافی نیست، شما باید این کدها را مدیریت کنید تا بتوانید آنها را آسانتر تشخیص بدهید. با اینکار بعدها، شما می دانید که جای هر کدی در کجاست و در کجا شروع و تمام می شود و کدهای مربوطه، در کدام قسمت قرار دارند. من برای جلو آوردن هر کدی از دکمه TAB بجای Spacebar استفاده کردم. بعدها که صفحه ی شما پر از کد شد، قدر اینکار را خواهید دانست.
◊ چه چیز اتفاق افتاد؟
» if(have_posts()) - یک عبارت شرطی است و چک می کند که شما آیا پستی دارید یا خیر؟ در حقیقت این کد را می توان اینگونه خواند: «اگر پستی وجود داشت اجرا کن…»
» while(have_posts()) - این کد همان حلقه ی مورد نظر ماست و معنی آن می شود: «تا زمانی که پستی وجود داشت، the_post() را اجرا کن».
» the_post() - پست ها را برای نشان دادن صدا می زند.
» endwhile; - همان قانون اول است – این عبارت حلقه ی while() را می بندد.
» endif; - شرط if() را می بندد.(قانون اول)
توجه: لازم نیست تمام کدهایی را که بازکرده ام، حتماً در آخر ببندیم بعضی از کدها از دو بخش ساخته نشده اند. برخی کدها می توانند خودشان، خودشان را ببندند، مثل: have_posts() یا the_post(); . کمی که با این مباحث بیشتر آشنا شوید، به راحتی می توانید بفهمید که چه کدی نیاز به بسته شدن دارد، و چه کدی نیازمند این عمل نیست.
● مرحله سوم:
در درس قبلی، شما یاد گرفتید که چطور عنوان وبلاگتان(blog’s title) را بوسیله ی bloginfo(’name’) صدا بزنید. حالا، باید برایتان آسانتر باشد که چگونه عنوان پست ها (post titles) را صدا بزند. برای اینکار در بین حلقه ها (The Loop) عبارت <?php the_title(); ?> را بعد از the_post(); ?> و قبل از <?php endwhile; ?> تایپ کنید. مانند زیر:

​

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

​

● مرحله چهارم:
الان عنوان پستهای شما قابل رویت است ولی امکان لینک ندارند. برای فعال کردن آدرس و یا لینک عنوان پست ها باید….. بیاد بیاورید که چگونه لینک را برای عنوان وبلاگ، فعال کردیم. دقیقاً مانند همان روش، تگ <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 آدرس مطلب شما را نشان داده خواهد شد، مانند عکس زیر:

​

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

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

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

​

در پایان باید صفحه ی کد شما به شکل زیر باشد:​

​

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