نیلو دیزاین


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

شروع کار با 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 رو تنظیم نکردی…

    [پاسخ]

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

برگه ها