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

[Cpanelcenter]

جلس اول :

سلام

از امروز شروع میکنیم به یادگیری ساخت یک وب سایت بر پایه وردپرس
اول از همه بگم برای داشتن یه قالب زیبا و جذاب بیشترین تاثیر رو ذوق و سلیقه ی شما داره !
سعی کنید با دیدن سایت های مختلف و دقیق شدن در زیبایی های اطرافتون دید زیبایی پیدا کنین تا بتونین چیزهای زیبا خلق کنید!
طراحی قالب هم مثل نقاشی ، خطاطی ،موسیقی و غیره یک هنره

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

او کی!
-الف (مواد لازم)

قبل از اینکه شروع کنیم به تهیه مواد این رو بگم که من دارم از صفر شروع میکنم یعنی اگه حتی تا حالا یک خط کد هم ننوشتید و یا تا حالا از اینترنت فقط برای چت و وبگردی استفاده میکردید میتونین به راحتی یاد بگیرین که یک سایت کامل بسازین
مواد لازم برای شروع
یک عدد notepad که توی همه ی کامپیوتر های با سیستم عامل ویندوز هست ، اگر هم از لینوکس یا مک استفاده میکنین ساده ترین ادیتور تکست رو برای اینکار استفاده کنید!
آخرین نسخه ی وردپرس که از این آدرس میتونید به رایگان دریافت کنید

دانلود آخرین ورژن وردپرس

نامه ی wamp server که میتونید از این آدرس به رایگان دریافت کنید

دانلود برنامه wampserver

آپدیت:توجه کنید لینک بالا برای دانلود wampserver در سایت sourceforge قرار داره که از اوایل بهمن ۸۸ کشور ما رو تحریم کرده و اجازه ی دریافت فایل رو به ما نمیده، اگر در ایران هستید و دسترسی به v.p.n و یا فیــلتر شــکن ندارین میتونین آخرین ورژن این برنامه رو از لینک زیر دریافت کنید.

Wampserver 2.2a 32bit

همین!
این رو هم بگم من تا حالا با مک و لینوکس کار نکرده ام و آموزش هام بر اساس ویندوز هست یعنی دوستان عزیز لینوکسی و اپلی منو ببخشن اگه اطلاعاتم در موردشون ضعیفه!
بگذریم…
فعلا ما دیگه به چیزی نیاز نداریم
اگه از اینترنتی با سرعت پایین استفاده میکنید شاید دانلود wampserver کمی خسته کننده باشه اما ارزششو داره چون قراره یک چیز جدید یاد بگیریم!
در پست بعدی شروع میکنیم به نصب wamp server و وردپرس با توضیح کارایی هر کدام
فعلا بای
منبع : تیتن
tenet.ir

[Mihan-Server]

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

[Cpanelcenter]

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

مرسی ممنون من هم امیدوارم که این طوری باشه و برای دوستان مفید

[Cpanelcenter]

جلس دوم :

سلام علیکم!!

شروع کنین!
خوب میریم سراغ اصل مطلب
تصویر زیر رو نگاه کنید

دیدین؟
حالا دقت کنین!
میبینیم که یک قالب تشکیل شده از چند قسمت مختلفه که در کنار هم قرار میگیرن !
البته اکثرن این شکلیه و میتونه به هر صورتی باشه! که فعلا به ما ربطی نداره!
تو قسمت header اسم وبلاگ و توضیحات میتونه قرار بگیره و تو index هم نوشته ها و پست های وبلاگ قرار میگیره یعنی همین جایی که شما میخونین داخل در index می با شد!
در sidebar هم که هر چیزی از جمله widget (ابزارک) های مختلف قرار میگیرن!
در footer هم اطلاعاتی مثل copyright ، نام طراح و …
البته اینها قانون نیستن شما میتونینهر کاری بخواهید انجام بدین مثلا جای index رو با footer عوض کنین!
البته اگه تاب برداشته باشه یه جاییتون! بلانسبت!
نکته ی بسیار خوب وردپرس که در پست قبل ازش گفتم اینجا روشن میشه که :
header و footer معمولا در صفحات مختلف از جمله page.php ، single.php و … تغییر نمیکنند! و این index است که مثلا single.php جایگزینش میشه.
این هم از این!
تموم شد
موظب خودتون باشین، اگه شد!
بای

[Cpanelcenter]

جلس سوم :

سلام

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

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

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

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

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

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

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

 C:\wamp\www\wordpress

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

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

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

index.txt

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

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

خوب؟

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

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

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

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

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

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

تگ < h e a d> هم قسمتی از صفحه است که بیشتر کار اطلاعات گرفتن و دادن به مرورگر و از سرور و این حرفارو داره یعنی به خواننده سایت کاری نداره! برعکس < b o d y > که بدنه ی وبلاگ و جاییه که ما از سایت میبینیم!

تگ <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.cpanelcenter.com/
Description: This is my frist theme for a tutorial.
Version: 1.0 beta
Author: Reza Bandari
Author URI: http://www.cpanelcenter.com/

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

 http://localhost/wordpress/wp-admin

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

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

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

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

http://localhost/wordpress/

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

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

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

موفق باشین

بای بای

[GEO]

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

موفق باشید

[Cpanelcenter]

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

موفق باشید

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

[Cpanelcenter]

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

خوب لطفا wamp رو باز کنید و به صفحه ی تم amoozesh که دیروز ساختیم برید

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

امیدوارم تغییری در فایل index.php ایجاد نکرده باشین! اگه اینکار رو انجام دادین به نوشته شماره۳ رفته و کد رو با من یکی کنید.

توسط مرورگر وبی که استفاده میکنین (که امیدوارم اینترنت اکسپلورر نباشه!!!!) برین به صفحه اصلی سایت

 http://localhost/wordpress/

پس الان ۳ تا صفحه باز داریم

فولدر تم آموزش

مرورگر وب در صفحه اصلی

و یک برنامه که یه آهنگ ملایم پخش میکنه!

همینطور که میبینید در صفحه سایتمون هیچی نیست!

خوب، میریم وارد index.php میشیم (با notepad) و بعد از تگ < b o d y > نوشته ی زیر رو تایپ میکنیم!!

کپی نمیکنیم!!!!

 <?php bloginfo(’name’); ?>

میدونیم که این یک کد نوشته شده به زبان php است و bloginfo یک تابع است که توسط سازندگان وردپرس ساخته شده و ما فقط اون رو فراخوانی میکنیم.

هر تابع php در مقابل خودش () دارد که میتونه بینش آرگمان های مختلفی باشه یا اصلا نباشه!

bloginfo الان نام (name) سایت رو برمی گردونه(یعنی اسم سایت ما رو به html تبدیل میکنه که نمایش داده بشه)

خوب؟ دیگه بیشتر از این نمیشه توضیح داد!

حالا کلید Ctrl رورو نگه دارین و S رو بزنین تا کارمون ذخیره(save) بشه!

حالا میریم به مرورگرمون که در صفحه ی اول سایتمون قرار داره و کلید F5 رو میزنیم تا صفحه refresh یا به قولی reload بشه.

دیدین؟!!

ما در واقع الان با تابع bloginfo نامی که در صفحه ی همگانی (general) تنظیمات (options) میتونیم عوض کنیم رو فراخوانی کردیم.

 http://localhost/wordpress/wp-admin/options-general.php

خوب حالا اگه بخواهیم که این نوشته رو به یک لینک تبدیل کنیم که کاربر با کلیک کردن روی نوشته به صفحه ی اصلی سایت بره چی؟

کاری نداره! با استفاده از یک تگ XHTML این کار به راحتی انجام میشه!

بلافاصله قبل از شروع کدی که نوشتیم یعنی php?> کد زیر رو اضافه میکنیم:

 <a href=”#”>

و بعد از <? هم این تگ رو که باز کردیم (یعنی تگ a رو) همونطوری که قبلا گفته بودم میبندیم یعنی یک / بهش اضافه میکنیم.

 </a>

تا در مجموع داشته باشیم:

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

یادتون نره کپی نکنید چون اصلا کار نخواهد کرد! من هم دیگر تکرار نخواهم کرد این نکته رو!

میبینید که الان نوشته ی ما تبدیل به یک لینک شده که البته با کلیک بر روی اون کار خاصی انجام نمیشه! حالا اگه بخواهیم کار خاصی انجام بشه چی؟

این هم کاری نداره

برای اینکه لینک مارو به صفحه اصلی سایت ارجاع بده باید کد زیر رو جایگذین # بکنید.

<?php bloginfo(“url”); ?>

احتمالا فهمیدین چی شد!

آرگومان تابع bloginfo رو اینبار url انتخاب کردیم که آدرس سایت رو برمی گرداند!!

به همین راحتی

به همین …

امیدوارم ابهامی نباشه و بیشتر امیدوارم که ایرادی در توضیحاتم نبوده باشه هرچند فکر میکنم امکانش نیست!

موفق باشید

مواظب خودتون هم باشین، اگه شد!

[Yas-Host]

با سلام
کارتون خیلی خوبه!
یک تایپک جهت سوال پرسیدن نیز باز کنید.

موفق باشید.

[Cpanelcenter]

با سلام
کارتون خیلی خوبه!
یک تایپک جهت سوال پرسیدن نیز باز کنید.

موفق باشید.

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