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

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

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

wp-php-theme

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

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


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

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

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

xampp-control

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

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

به بخش پوسته های وردپرس بروید ، یعنی آدرس زیر:
xampp/htdocs/wordpress/wp-content/themes
در این مکان فولدری بنام
tutorial بسازید. به همین سادگی…

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

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

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

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

save-as-indexphp

save-as-indexphp2

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

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

index-and-style

توضیحات index.php :

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

indexphp-explain

» 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> - این تگ نشان دهنده ی این است که صفحه ی وب من تمام شده است و هیچ چیز دیگری بعد از آن نیست.

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

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

درون آدرس بار مرورگرتان تایپ کنید عبارت :
http://localhost/wordpress/wp-admin
و سپس به داخل بخش مدیریت وردپرس  بروید.
(
wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس گذاشته اید.)

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

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

theme-empty-screenshot

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

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

فراموش نکنید که بخش کنترل Xampp را ببندید. برای اینکار بروی آیکون آن در بخش system tray دوبار کلیک کنید  و Mysql و Apache را متوقف کنید ، سپس بروی Exit کلیک نمایید.
مانند عکس زیر:

xampp-control-close

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

مطالب مرتبط

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

  1. کامل و جالب بود، موفق باشی…

    Mahdi پاسخ داده است در تاریخ دی ۱۲م, ۱۳۸۷ ۷:۴۷ ب.ظ:

    میلاد جان ، لطف داری..
    شما هم موفق باشید…

  2. با سلام و خسته نباشید
    xampp چند تا ورپن داره ممنون میشم توضیح دهید کدام ورن رو انلود کنیم
    بخشهای آموزش ادامه دارد یا خیر ؟

    Mahdi پاسخ داده است در تاریخ دی ۱۴م, ۱۳۸۷ ۱۲:۱۲ ق.ظ:

    دوست من به گمانم که شما از مطلب اول شروع نکرده اید ، علی رغم اینکه من بسیار سفارش کرده ام.
    این سری آموزشی شامل ۱۴ الی ۱۶ آموزش می باشد و هنوز ۳ درس از این ۱۶ درس بیشتر داده نشده است .
    در مورد برنامه ی Xampp باید بگویم که ابتدا مطلب اول را بخوانید به این سوال شما نیز دوستان دیگر که من لینکشان را در مطلب اول گذاشته ام ، جواب داده اند.
    http://www.p30help.ir/how-make-wordpress-theme
    موفق باشید.

    idinpc پاسخ داده است در تاریخ دی ۱۷م, ۱۳۸۷ ۲:۵۶ ب.ظ:

    سلام ممنون از پاسخ شما
    این لینک دانلود برنامه هستش
    کدوم ورژن رو باید بگیریم ؟
    http://www.apachefriends.org/en/xampp-windows.html#641

    Mahdi پاسخ داده است در تاریخ دی ۱۷م, ۱۳۸۷ ۵:۳۱ ب.ظ:

    دوست من شما می تونید دو ورژن مختلف رو بگیرید.
    ورژن کامل Xampp با حجم ۴۳ مگابایت که لینک دانلودش در پایین گذاشتم
    http://www.apachefriends.org/download.php?xampp-win32-1.7.0-installer.exe
    یک ورژن دیگه ای هم داره که Xampp Lite بهش می گن حجمش ۱۷ میگه ولی امکاناتش کمتره و قابلیت اضافه شدن پلاگین رو هم نداره
    اما مطمئن باش همین ورژن لایت هم به طور کامل امکاناتی که می خوای برای کار با وردپرس رو ، بصورت کامل فراهم می کنه حالا انتخاب با خودته
    لینک دانلود ورژن لایت رو در زیر گذاشتم:
    http://www.apachefriends.org/download.php?xampplite-win32-1.7.0.exe
    موفق باشی

  3. آقا این Xampp که میگن کیلو چنده کلا چی هست؟ :)))‌اسمایلی حرص دادن نویسنده :lol:

  4. سلام مطلبتون خیلی خوبه فقط زودتر تکمیلش کن اگه به جای Xampp از wamp استفاده کنم که مشکلی نیست؟

    Mahdi پاسخ داده است در تاریخ دی ۱۵م, ۱۳۸۷ ۸:۳۴ ب.ظ:

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

    مجتبی پاسخ داده است در تاریخ دی ۱۶م, ۱۳۸۷ ۹:۵۲ ب.ظ:

    ممنون منتظرم :grin:

  5. آقا خونه ت آباد! داریم فیض می‌بریم. ببینم درسای بعد چه خواهد بود.

  6. ممنون

  7. سلام. ۲ تا سئوال :

    ۱.من از easyphp استفاده میکنم. مشکلی که نداره ؟ نظری نداری راجع بهش ؟

    ۲. همۀ این کار هارو کردم. تو فایرفاکس این پیغام رو میبینم.

    Fatal error: Call to undefined function bloginfo() in E:\tutorial\index.php on line 5

    ولی تو IE8 همون صفحۀ سفیده !

    سلام پاسخ داده است در تاریخ شهریور ۴م, ۱۳۸۸ ۶:۱۲ ب.ظ:

    مشکل حل شد ! میخواستم ببینم بدون نصب وردپرس میشه یا نه ! دیدم نشد. حالا که وردپرس رو ریختم شد

  8. sسلام آموزشی خوبی است ولی من هر کاری می کنم Apache را نمیتونم روشن کنم از ابتدای پست قالب های ورد پرس خوانده ام ولی از این جا به بعد مشکل پیدا کردم و XAMPP را همان ورژنی که شما گفتید دانلود کرد
    کمشکل من چیست لطفا سریعتر من را راهنمایی کنید

    مهدی رادی پاسخ داده است در تاریخ دی ۸م, ۱۳۸۸ ۸:۵۷ ق.ظ:

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

  9. کسی جواب من را نمیده
    پیج رنک سایت شما شده ۴ دیگه نظرات و سوالات ما را اهمیت نمیدید

    مهدی رادی پاسخ داده است در تاریخ دی ۸م, ۱۳۸۸ ۸:۵۸ ق.ظ:

    اختیار داری، ما خودمون محتاج یک ذره توجه ایم کی باشیم که بخوایم بی توجهی کنیم…
    مخصلیم…

  10. آخه روی کامپیوتر من یک IIS هم نصب است
    اگه پاک کنم مشکل درست میشه

    مهدی رادی پاسخ داده است در تاریخ دی ۱۱م, ۱۳۸۸ ۵:۱۹ ب.ظ:

    دقیقاً درسته همین IIS مانع فعال شدن آپاچی میشه…

  11. مشکل من از لحاظ فعال شدن Apache حل شد
    ممنون از راهنمایی هایتان

  12. سلام من دوبازه به مشکلی بر خوردم
    از را هنمای هایتان در مورد فعال کرد آپاچی باز هم ممنون
    من از اول پست هایتان مطالب شما را دنبال کردم و در اینجا که توضیح میدهم مشکل پیدا کردم.
    ” مرحله ی پنجم : پوسته تان را منتشر کنید
    برای اینکار یک مرورگر را باز کنید

    درون آدرس بار مرورگرتان تایپ کنید عبارت :
    http://localhost/wordpress/wp-admin
    و سپس به داخل بخش مدیریت وردپرس بروید.
    (wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس گذاشته اید.) ”
    اینی که داخل گیوه نوشتم را متوجه نشدم وقتی تو قسمت مرورگر http://localhost/wordpress/wp-admin این را وارد می کنم صفحه زیر با نوشته های زیر باز میشه:
    “Object not found!
    The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.

    If you think this is a server error, please contact the webmaster.

    Error 404
    localhost
    01/01/10 20:25:01
    Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i mod_autoindex_color PHP/5.2.8 ”
    مشکل من کجاست .
    باید این آدرس بزنیم به بخش ودیریت وردپرس برویم طبق نوشته شما ولی این مشکل برای من پیش میاد
    لطفا سریعتر به سوال من جواب دهید

    مهدی رادی پاسخ داده است در تاریخ دی ۱۷م, ۱۳۸۸ ۹:۳۳ ق.ظ:

    دوست عزیز
    اول از همه مطمئن باش که آپاچی و mysql حتماً به درستی فعال هستند…
    دوم اینکه مطمئن باش که آدرس رو درست می زنی
    و سوم اینکه شاید اطلاعات فایل config.php رو تنظیم نکردی…

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

    مهدی رادی پاسخ داده است در تاریخ اردیبهشت ۲۹م, ۱۳۸۹ ۱:۳۰ ب.ظ:

    حدس می ز نم که توضیخات اولیه ی فایل استایل رو وارد نکردی…

  14. سلام . خسته نباشید. ببخشید من نمی تونم index.txt رو دانلود کنم.

    مهدی رادی پاسخ داده است در تاریخ خرداد ۱م, ۱۳۸۹ ۱۱:۲۳ ق.ظ:

    فایل تست شد هیچ مشکلی وجود نداشت….
    بهتره که بروی لینک راست کلیک کرده و Save as target رو انتخاب کنید…
    موفق باشید

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

    مهدی رادی پاسخ داده است در تاریخ تیر ۱۷م, ۱۳۸۹ ۱۲:۱۴ ب.ظ:

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

  16. سلام.
    من هم دقیقا مشکل mashhadpix رو دارم.
    درون آدرس بار مرورگرتان تایپ کنید عبارت :
    http://localhost/wordpress/wp-admin
    و سپس به داخل بخش مدیریت وردپرس بروید.
    (wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس گذاشته اید.) ”
    اینی که داخل گیوه نوشتم را متوجه نشدم وقتی تو قسمت مرورگر http://localhost/wordpress/wp-admin این را وارد می کنم صفحه زیر با نوشته های زیر باز میشه:
    “Object not found!
    The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.

    If you think this is a server error, please contact the webmaster.

    Error 404
    localhost
    01/01/10 20:25:01
    Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i mod_autoindex_color PHP/5.2.8 ”

    اما آپاچی و mysql من درست کار می کنن و آدرس رو هم درست وارد می کنم
    اما نمی دونم که اطلاعات فایل config.php رو تنظیم کردم یا نه؟
    اگه می شه بیشتر توضیح بدید. یه لطف دیگه اینکه من منظوزتون رو دریاره ی اینکه “به داخل بخش مدیریت وردپرس بروید, هنگامی که داخل بخش وردپرس شدید ، به بخش مدیریت پوسته ها بروید و پوسته ی Tutorial را فعال نمایید.” رو متوجه نشدم.
    خیلی ممنون.

  17. *****حتما به این نکته دقت کنید*****

    سلا به همه
    یک نکته بسیار ظریف و خیلی مهم که به اون اشاره نکردین اینه که باید فایل style.css یا هر فایل دیگه رو با حروف کوچیک تایپ کرد وگرنه ارور “شیوه‌نامه گم شده” میده.

    *****حتما به این نکته دقت کنید*****

    مهدی رادی پاسخ داده است در تاریخ مرداد ۱۰م, ۱۳۸۹ ۴:۲۷ ب.ظ:

    نکته ی خوبی بود امیر جان ممنون…

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

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    tutoria Stylesheet is missing.

    مهدی رادی پاسخ داده است در تاریخ مرداد ۱۷م, ۱۳۸۹ ۱۰:۰۳ ب.ظ:

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

  19. برای من این طوری چیکار کنم؟��� � �� � �� � � � � ����� � � � � �<�m�e�t�a� �h�t�t�p�-�e�q�u�i�v�=�"�C�o�n�t�e�n�t�-�T�y�p�e�"� �c�o�n�t�e�n�t�=�"��;� �c�h�a�r�s�e�t�=��”� �/�>� � � � �<�m�e�t�a� �n�a�m�e�=�"�g�e�n�e�r�a�t�o�r�"� �c�o�n�t�e�n�t�=�"�W�o�r�d�P�r�e�s�s� ��”� �/�>� �� � � � � �<�l�i�n�k� �r�e�l�=�"�s�t�y�l�e�s�h�e�e�t�"� �h�r�e�f�=�"��”� �t�y�p�e�=�”�t�e�x�t�/�c�s�s�”� �m�e�d�i�a�=�”�s�c�r�e�e�n�”� �/�>� � � �<�l�i�n�k� �r�e�l�=�"�a�l�t�e�r�n�a�t�e�"� �t�y�p�e�=�"�a�p�p�l�i�c�a�t�i�o�n�/�r�s�s�+�x�m�l�"� �t�i�t�l�e�=�"�R�S�S� �۲�.�۰�"� �h�r�e�f�=�"��”� �/�>� � � �<�l�i�n�k� �r�e�l�=�"�a�l�t�e�r�n�a�t�e�"� �t�y�p�e�=�"�t�e�x�t�/�x�m�l�"� �t�i�t�l�e�=�"�R�S�S� �.�۹�۲�"� �h�r�e�f�=�"��”� �/�>� � � �<�l�i�n�k� �r�e�l�=�"�a�l�t�e�r�n�a�t�e�"� �t�y�p�e�=�"�a�p�p�l�i�c�a�t�i�o�n�/�a�t�o�m�+�x�m�l�"� �t�i�t�l�e�=�"�A�t�o�m� �۰�.�۳�"� �h�r�e�f�=�"��”� �/�>� � � �<�l�i�n�k� �r�e�l�=�"�p�i�n�g�b�a�c�k�"� �h�r�e�f�=�"��”� �/�>� � � � � �� � � �� � � �� � �� � �� � � � �� � ��

    مهدی رادی پاسخ داده است در تاریخ مرداد ۲۸م, ۱۳۸۹ ۳:۴۲ ق.ظ:

    چی اینطوریه ی محسن جان،‌ احتمال می دم که زبان فایل رو به uft8 تبدیل نکردی

  20. ممنون همانطور که گفتید موقع save فایل index.php ,style.css
    encoding را unicode را انتخاب میکردم و این مشکل ایجاد میشد

    مهدی رادی پاسخ داده است در تاریخ شهریور ۶م, ۱۳۸۹ ۵:۱۹ ب.ظ:

    محسن جان encoding رو در حالت without BOM انتخاب کن

  21. همچین مسیری نیستxampp/htdocs/wordpress/wp-content/themes فقط تااین مسیر هستxampp/htdocs

    مهدی رادی پاسخ داده است در تاریخ شهریور ۶م, ۱۳۸۹ ۵:۲۳ ب.ظ:

    اسم تابعی که استفاده می کنید چیه؟

با خیالی آسوده یک نظر بگذارید...

برگه ها