آموزش طراحی قالب وردپرس #۳

سلام

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

لیست آموزش های وردپرس

خوب میریم سراغ کارمون

امروز میخواهیم یکمی هم بنویسیم یعنی کار ما داره شروع میشه.

یک بار دیگه تاکید میکنم که وقتی میگم فلان چیز را بنویسید لطف کنید و اون رو بنویسید و کپی نکنید!

قول میدهم به نفع شما خواهد بود وهمچنین قول میدهم ضرری برای من نخواهد داشت!! دروغم چیه؟!! 😀 والا به خدا!

خوب اول از همه وسایل کار رو آماده کنید یعنی wamp رو باز کنید ، همینطور notepad رو!

خواهشن از notepad استفاده کنید،نه ویرایشگرهای متن دیگر (البته اگر از notepad ساده تر گیر آوردین بهتره!!)

قبلا یاد گرفتیم که چطوری وردپرس رو روی کامپیوتر نصب کنیم و من اینکار رو در این آدرس انجام دادم:

C:\wamp\www\wordpress

به این فولدر که وارد شدیم محتویات وردپرس رو میبینیم

باید بعد از اون به wp-content و بعد به پوشه ی themes بریمو یک فولدر جدید که اسم قالب خواهد بود بسازیم من اسم قالب رو میزارم amoozesh !

خوب حالا این فایل رو دانلود کنید

index.txt (4405 دانلود ها)

بعد با notepad بازش کنید سپس به گزینه file رفته و save as رو بزنین و بعد در آدرس زیر با نام index.php سیو کنید.

C:\wamp\www\wordpress\wp-content\themes\amoozesh

خوب؟

خوب!! منم اینکارو کردم بعد هرچی کد تو صفحه بود پاک کردم و دوباره به save as رفتم و اینبار اسم فایل رو style.css گذاشتم!

حالا شما هم اینکارو کنین لطفن!همه چیز فکر میکنم واضح بود به هر حال این عکس رو هم میذارم ببینین چه خبره!

خوب یک سری توضیح کوچولو هم میدم در مورد کدی که کپی کردین در فایل index.php

doctype در اول صفحه که میبینین و منم میبینم ام نمیدونم چیه! اول همه ی فایل های html میذارن منم گذاشتم! اگه میخواهین بیشتر از اینی که من گفتم!! بدونین برین بسرچین!!

من که علاقه ای به دونستنش ندارم!

تگ <html> به مرورگر ما (web browser ) میگه که کد های زیرش تا جایی که برسه به <html/> به این زبون نوشته شده!

تگ <head> هم قسمتی از صفحه است که بیشتر کار اطلاعات گرفتن و دادن به مرورگر و از سرور و این حرفارو داره یعنی به خواننده سایت کاری نداره! برعکس <body> که بدنه ی وبلاگ و جاییه که ما از سایت میبینیم!

تگ <title> عنوان صفحه رو در بر میگیره که قرار در واقع اسم سایت ما باشه!

<?php bloginfo(‘stylesheet_url’); ?> هم به ورد پرس میفهمونه که بره جایی که stylesheet ما قرار داره که در واقع فایل style.css که ساختیم رو به عنوان طراح صفحه (استایل کننده در واقع) میشناسونه.

بعدا باز بیشتر توضیح میدم الان فقط هدف پر حرفیه!

پس یادآوری شد که هر تگ بین <> است و پایان اون یک / به پشتش اضافه میشه!

حالا یک توضیح در مورد php

میدونیم که وردپرس با زبان php نوشته شده که اگه قویترین زبان برنامه نویسی تحت وب نباشه قطعا دومیشه!

php بر روی سرور ما(یعنی جایی که سایت بر اون هست) یا همون هاست ما نصب هست(یعنی همینی که ما شبیه سازی کردیم توسط برنامه wamp ) وقتی مرورگر وب که داره صفحه رو میخونه تا ترجمه کنه و به ما نشون بده به

<?PHP

میرسه دیگه کاری نداره! یعنی نمیتونه داشته باشه! اینجاست که php که روی سرور نصبه وارد کار میشه و شروع به کامپایل کردن یا همون تجزیه و تحلیل کردن کد میکنه و یک خروجی به مرورگر میده و این کار کامپایل کردن رو تا زمانی که به کد

?>

برسه ادامه میده و بعد …. همینطوری ادامه داره کار تا زمانی که سایت کاملا لود شه و به html ترجمه شه تا ما بتونیم اینجوری که هست ببینیمش!

پس ما هرچیزی که بین php?> , <?  مینویسیم باید به زبون php باشه!

و این مساله بدین معنا نمیباشد که باید برنامه نویس باشیم!! پس ترس نداره

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

همین دیگه!

بیشتر از این عذاب دهنده نمیشم!

فقط ۵ دقیقه مونده

فایل style.css رو اگه نبستین ببندین دوباره باز کنین! همینجوری!

بعد اینارو کپی کنین توش

/*
Theme Name: Amoozesh
Theme URI: http://www.TeneT.ir/
Description: This is my frist theme for a tutorial.
Version: 1.0 beta
Author: Siavash Keshmiri
Author URI: http://www.TeneT.ir/

*/

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

http://localhost/wordpress/wp-admin

حالا به Appearance یا همون “نمایش” در وردپرس فارسی برین

میبینین که یک تم جدید ساخته شده به اسم آموزش که siavash keshmiri  ساختتش و یک سری توضیحات داره البته این اسم رو به اسم خودتون تغییر بدین چون قراره شما تم رو بسازین!

پس فهمیدیم که کدی که اول استایل نوشتیم چه کاری کرد!

حالا این تم رو فعال کنید و برین به صفحه اول سایتتون یعنی همون

http://localhost/wordpress/

میبینین که هیچی نمیبینین که!

اگه چیزی ببینین یعنی اشتباه کردین! 😀

امروز هم تمام شد

موفق باشین

بای بای

‏56 دیدگاه برای ”آموزش طراحی قالب وردپرس #۳

  1. سلام ?-چگونه میتوان ترتیب نمایش در صفحه خانه مشخص کرد .مثلا من میخواهم در باره ما بالا باشه و بعد مثلا”ارتباط با ما باشه یعنی اولویت نمایش از بالا به پایین مشخص کنیم من ایتمی در این مورد درپنل مدیریت ندیدم.
    ?-header بالای سایت که که لگوی سایت اونجا باشه چگونه میشود تغییر داد.

  2. سلام،واقعا اموزش جالبیه .من خیلی بهش نیاز داشتم ولی این فایل index.txt دانلود نمیشه.نمیدونم چه مشکلی داره لطفا لینک رو اصلاح کنید.

  3. توضیحاتت بدلیل بیش از حد آماتور بودن عذاب آوره و در کل فوق العاده هستش و به درد همه قشری میخوره.

  4. سلام سیاوش جان
    واقعاً ممنونم از آموزش بسیار بسیار مفید و خوبت، شیوه ی آموزشی بسیار خوبو جالبی داری، واقعاً بهت تبریک میگم، خداییش من که لذت بردم.
    فقط من تو این قسمت به یه مشکلی برخوردم و اون اینه که وقتی آدرس:
    http://localhost/wordpress/wp-admin.php
    رو توی بروزر میزنم میگه:
    The webpage cannot be found
    به نظر شما مشکل چیه؟
    خودم حدس میزنم از wamp باشه چون مشکوک میزنه!
    با اینکه اون icone کنار ساعت با ۱۰۰۱ بدبختی بلاخره کاملاً سفید شده ولی داخلش یه شکل سیاه شبیه به قفل هست.
    خلاصه به راهنماییت نیازمندم جیگرطِلاجان، مارا دریاب…

    1. سلام،مرسی،خدا رو شکر،من گفتم این آدرس رو برین؟ اگه گفتم لطفا بگین کجا که درستش کنم چون آدرس درست wp-admin است یعنی wp-admin.php نیست.
      آدرس به فولدر wp-admin میره که اتوماتیک خودش وارد wp-admin/index.php میشه! اکی؟
      در مورد اون قفل هم چیزی نمیدونم:D

  5. اکی، ممنون از راهنماییت سیاوش جان
    آره، ظاهراً تو این قسمت اشتباه شده:
    (بعد از سیو کردن برین به کنترل پنل یا همون داشبورد وردپرس
    http://localhost/wordpress/wp-admin.php
    حالا به Appearance یا همون “نمایش” در وردپرس فارسی برین)
    اون قفل رو هم پی گیری کردم، مشکلی نداره
    ًظاهراً آیکن برنامه تو ورژن جدید اینشکلی شده

  6. سلام // من وقتی میرم به داشبورد ورد پرس می بینم که/ این تم رو در بخش تم های خراب گذاشته

  7. he following themes are installed but incomplete. Themes must have a stylesheet and a template.
    آقا توضیحاتت خیلی کامله ، ولی من گویا یه جایی گند زدم . چند بار تکرار کردم این روند رو ولی آخرش برام این ارور بالایی میاد . توی broken themes میره این تم ! چرا ؟

  8. شاید مغزم گو… ، قسمت بعدی رو هم خوندم ، یه سوال دارم ، اینکه میگی wamp رو باز کنید یعنی چی ؟ اینکه همیشه این گوشه هست ؟ چه جوری بازش کنیم ؟

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

    1. :)) گزارش لحظه به لحظه میدی؟ توییتر نیست اینجا که :))! به هر حال جمله ارور اول که معلومه، نوشته که فایل iindex و stylesheet رو نساختی! // در مورد باز کردن ومپ هم برای اینه که این آموزشها تو یه روز نوشته نشدن که! اولها دوستان روز به روز همراهی میکردن برای همین باید هر سری باز میکردن دیگه! سوالهایی میکنی ها! // موفق باشی

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

    1. سلام، امیدوارم به دردتون بخوره فقط کاش توی قسمت خودش کامنت میدادین، برین تو پست مربوطه لینک دانلود رو گذاشتم، میتونین دانلود کنید الان

  11. سلام..آقا خیلی هم خوب..چه توضیحات خوبی.. جدن که لذت می بریم…
    فقط یه سوال این کارا که با wamp انجام میدیم رو میشه با cuteFTP هم بکنیم؟/ آخه من از قبل وردپرسم رو این طوری نصب کرده بودم!
    خدایی دستتون درد نکنه 🙂

    1. سلام ،ممنونم 🙂
      wamp در واقع یه سرور شبیه اونی که سایت ها روش پیاده میشن به صورت مجازی روی ویندوز شبیه سازی میکنه، برنامه cuteFTP که شما گفتین رو من کار نکردم باهاش ولی اونطور که از اسمش معلومه برنامه مربوط به FTP هست که مربوط میشه به انتقال فایل به سرور سایت، که شما برای راه اندازی سایت بهش احتیاج دارین نه تست کردن قالب ها در ویندوز

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

  13. سلام استاد
    واقعا از ممنون از مطالب مفیدت.
    خیلی لذت میبرم از اینکه اینقدر جالب و جذاب توضیح میدی روش کار رو.
    واقعا خسته نباشی.
    و ممنون.

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

  15. با سلام و تشکر فراوان
    من به دقت مراحل گفته شده دنبال کردم و انجام دادم.
    تم ساخته شده در لیست تمها میاد ولی وقتی بازش میکنم ، علیرغم خالی بودن قسمت body محتویات فایل index.php بصورت عجیبی به نمایش درمیاد!

    1. من که همه اینکارا را کردم این پیغام می یاد
      There doesn’t seem to be a wp-config.php file. I need this before we can get started. Need more help? We got it. You can create a wp-config.php file through a web interface, but this doesn’t work for all server setups. The safest way is to manually create the file.
      حالا چه کار کنم

  16. سلام.خسته نباشید..آموزش ها خیلی مفید و کامل هستن..متشکرم.من یه مشکلی دارم.من اول wamp را نداشت برای همین بدون اون با آموزش ها جلو رفتم تا آخر و الآن wamp را نصب کردم با وردپرس فارسی نسخه ۳٫۱٫۳ ..خوب.الآن وقتی فولد تم آموزش را در مسیر تم ها قرار میدم توی قسمت تم ها ظاهر و حتی فعال میشه ولی موقع مشاهده سایت این پیغام ظاهر میشه:Parse error: parse error in E:\wamp\www\wordpress\wp-content\themes\amoozesh\index.php on line 13
    من فایل های خودم را با مال شما چک کردم و حتی فایل indext شما را با مال خودم عوض کردم ولی درست شد…میشه لطفا راهنمایی کنید..متشکر

    1. اینجور که ارور میگه مشکل تو خط ۱۳ هست، ممکنه حتا یک کاراکتر مشکل داشته باشه، اگه متوجهش نشدین بفرستین به ایمیلم تا چک کنمش

  17. یه سوال تخصصی!
    این ارورهایی که توی لاین های مختلف می ده یعنی چی؟؟؟
    من واسه نصب وردپرس و ساخت پوسته از اعداد دورقمی گرفته تا چهار رقمی شو تجربه کردم!

  18. سلام
    من تمام کارهایی رو که گفته بودبد انجام دادم و تا الآن ۲۰ بار با دقت کامل تکرار کردم با پیغام زیر مواجه شدم
    —————————————————————————————————
    پوسته‌های خراب

    پوسته‌های زیر راه‌اندازی شده‌اند ولی ناقص هستند. پوسته‌ها باید یک شیوه‌نامه و یک قالب داشته باشند.

    نام توضیح
    amoozesh شیوه‌نامه گم شده.
    ———————————————————————————————————————-

    منتظر جوابتون هستم

    ارادتمند

  19. سلام
    یادتون رفت کانفیگ wamp رو آموزش بدین
    ابتدا بر روی آیکن wamp کلیک کنید(در سینی ویندوز)

    سپس گزینه php my admin v رو کلیک کنید تا یک صفحه باز شه

    بعد در قسمت create database یک پایگاه داده با هر اسمی ک دوس دارید بسازید

    بعد بر روی نام پایگاه داده در سمت چپ (ک خودتون ساختین) کلیک کنید
    در قسمت privileges یک کاربر جدید برای پایگاه داده بسازید

    تمام

  20. سلام.
    اول که ممنونم بابت این آموزش.
    بعدم سیاوش من همه کارها رو کردم منتها تمی به اسم آموزش که از طرف تو ساخته باشه رو نمی بینم. میشه لطفن راهنمایی م کنی؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.