تبلیغات
پشتیبانی وردپرس پشتیبانی سایت


امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش گام به گام ساخت قالب وردپرس به زبان ساده
#1

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


سوالات خودتونو در تاپیک جداگانه مطرح نمایید !

اسپم = اخطار !



استفاده از مطالب فقط با ذکر منبع مجاز است


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


تبلیغات
تبلیغات ارزان تبیلغات
#2
با تشکر از جناب رضایی عزیز بابت این کار خوبتون
تاپیک مورد نظر جهت اختصاصی شدن آموزش بسته می شود.
دوستانی که سوالاتی پیرامون آموزش دارن در تاپیک زیر میتونن سوالات خودونو بیان کنن.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[تصویر:  25s3xesssbtaqxwq8r5.gif]


طراحي
انواع قالب ، طراحي افزونه ، طراحي سايت ، برنامه نويسي وب

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


فروش انواع قالب و افزونه در فروشگاه وردپرس
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
#3
قسمت اول

سلام !

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

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

در بخش اول مقدمات کار رو فرا میگیریم . خوب میریم سر اصل مطلب ...!


وردپرس چیست ؟ احتمالا منتظر این نیستید که من باید اول وردپرس رو تعریف کنم ! یعنی اگه هم بخواین من یکی که وقتشو ندارم اما مطمئنا میدونید اون چیه که الان اومدین و میخواین

براش قالب بسازین ! درسته؟

برای طراحی یک قالب شما اول باید یک طرح کلی از قالبتون رو توی ذهنتون ویا روی کاغذ پیاده کنید که من هم از این قضیه مثتثنی نیستم و این کار رو میکنم و در جلاسات آینده به شما

هم نشونش مبیدم ! :o) اما مواد لازم برای طراحی یک قالب خوب و زیبا !

1- آشنایی با داشبورد یا همون پنل مدیریتی وردپرس ! اگه این رو بلد نیستید یا به عبارتی اصلا توی وردپرس نچرخیدید همین الان برین و یک ساعت باهاش کار کنید تا متوجه امکانتی رو

که براتون گذاشته ، بشین .

2- یک عدد سرور مجازی برای پیشرفت سریع کار (ترجیحا از wamp server استفاده کنید).

3-یک عدد ویرایشگر ساده متن >> برای اینکه بخواهید و بتونید کد نویسی رو یاد بگیرید سعی کنید از یک ویرایشگر ساده مثل notepad و یا نهایتا notepad++ استفاده کنید !

4- آشنایی نسبی با html و css ،

5-یک عدد وردپرس.

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

اون استفاده کنید !

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

و موارد ذکر شده رو تهیه کنید .


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


#4
قسمت دوم
قسمت
دوم آموزش رو دنبال میکنیم ... اجازه بدین خیلی سریع کار خودمون رو شروع کنیم ! نگران نباشید این جلسه حتما به کار عملی میپردازیم تا حوصلتون سر نره !! قبل از شروع هر چیز لازمه که بدونین

یک قالب وردپرس از چندین فایل تشکیل شده ، مثل : index.php ، single.php ، search.php و ...
برای اینکه دقیقا بفهمین که من چی میگم میتونید خودتون یک قالب آماده وردپرس رو دانلود کنید و از

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

اونها فایلهای index و style هستند که فایل ایندکس base قالبتون هست و فایل استایل هم که معلومه برا چی هست ! وجود این دوفایل برای قالب از اوجب واجبات و از نون شب هم براش واجب تره (

یعنی تا این حد.... ! )
خوب حالا نوبت میرسه به آغاز کار طراحی ،، برای این کار در وحله اول باید بدونیم که قالب های وردپرس در کجا قرار میگیرند ؟ این قالب ها در مسیر wp-content\themes واقع شده

اند ، اگه ما هم به این مسیر بریم متوجه میشیم که اونجا تو تا پوشه به اسمهای twentyten و twentyeleven هستند .. این دو تا پوشه همون دو تا قالب پیشف فرضی هستند که روی وردپرس هست !

از این کار نتیجه میگیریم که قالبی رو هم که ما قراره طراحی کینم باید همین جا باشه ! درسته ؟
در این جا ما یه پوشه ایجاد میکنیم و یک اسمن دلخواه که همون اسم قالبمون هست رو براش انتخاب

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

خیلی حیاتی رو که گفتم توی پوشه قالبمون (wp ) ایجاد میکنیم ، یکی به نا index.php و دیگری هم با نام style.css . حالا فایل ایندکس رو با همون نت پد باز میکنیم و یک سری کد html که مربوط به

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

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

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

ما فعلا خشک و خالیه ! برای اینکه ما هم برای قالبمون یه تصویر داشته باشیم فتوشاپ عزیزرو صدا میزنیم و یک فال 300*225 ایجاد میکنیم و یک طرح دلخواه برای قالبمون میکشیم و سپس اونو با اسم

screenshot.png ذخیره میکنیم این نام برای این فایل الزامی هست چون وردپرس این اسم رو میشناسه ! حالا این عکس رو در پوشه قالب میذاریم و به پنل مدیریتی باز میگردیم و کلید f5 رو فشار

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


[تصویر:  b0650ff38f84.png]

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

به قوانین وردپرس احترام بگذاریم و از متنی که برای این منظور گذاشتند استفاده کنیم .. برای ایجاد این نوشته ها لازم هست تا فایل style رو ویرایش کنیم .. خوب این فایل رو با ادیتور باز میکنیم و کد زیر

رو بالای اون قرار میدیم. و ذخیره میکنیم.


کد:
/*
Theme Name: wp
Theme URI: http://www.wp-help.ir
Description: یه توضیح کوچیک در مورد قالب و یا هر چیز دیگه
Version: 1.0
Author: css in wp-help.ir
Author URI: همه جای ایران سرای من است

*/



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

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

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


فایل‌(های) پیوست شده
.zip   index$style.zip (اندازه: 503 bytes / تعداد دفعات دریافت: 10)


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


#5
قسمت سوم
سلام . به قسمت سوم آموزش خوش آمدید .. امیدوارم که اون دو قسمت رو دنبال کرده باشین ..! امروز میخوام هسته طراحی سایت و یا به عبارتی ورود به دنیای طراحی رو آموزش بدهم

.. ! ابتدا این موضوع رو مطرح کنم که ، قالبی رو که من میخوام طراحی کنم و آموزش بدهم با قالب های آموزشی موجود در ایترنت کمی فرق میکنه و در این قالب از تکنیک های خوبی

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

شروع »» یه موضوع مهم !! ما میتونیم در ارتباط با استایل به چند صورت قالب رو طراحی کنیم ... 1- اول اینکه قالب رو با استفاده از html و css طراحی کنیم و سپس اونو به وردپرس

تبدیل کنیم . 2- دوم اینکه ابتدا کدهای وردپرس رو بنویسیم و سپس برای هر جزیی یک استایل تعریف کنیم و 3- سوم اینکه هر دوی این ها رو به صورت همزمان پیش ببریم ! متوجه

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

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

[تصویر:  87105595248598600506.gif]

اگر در پنل وردپرس به قسمت »» تنظیمات »» همگانی بریم به صفحه ای میریم که مثل شکل بالاست ! خوب در فیلد عنوان سایت ما یک اسم نوشتیم (شماره 1) و در قسمت دوم هم

توضیح مختصری درباره سایت ! تنظیمات رو ذخیره میکنیم و به سراغ سایتمون میریم . اما پس از انجام این کار مشاهده میکنیم که قالب ما هیچ تغییری نکرد ! چرا ؟ برای اینکه اسمی رو

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

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

داده بشه باید اونو فراخوانی کنیم برای این کار از کد زیر استفاده میکنیم !!

کد php:
<?php bloginfo('name'); ?>

این کد رو باید جایی بذاریم که قراره توسایت هم نشون داده بشه .. که معمولا در بالای سایت هست ... خوب فایل ایندکس رو با ادیتور باز میکنیم و دقیقا بعد از تگ body قرار میدهیم

.سپس صفحه رو ذخیره و سایت رو مشاهده بفرمایید ! دقیقا همون نامی که برای عنوان سایتمون نوشتیم رو مشاهده می نمایید برای نشان دادن توضیحات هم طبق مراحل بالا عمل

میکنیم با این تفاوت که به جای name از کلمه description استفاده میکنیم ! به این شکل :

کد php:
<?php bloginfo('description'); ?>

یه توضیحی در مورد این دو تابع میدهم که در اکثر توابع هم صدق میکند و اون اینکه این دو تابع هر دو از اسم مشترکی به نام bloginfo استفاده میکنند به این معنی که با این اسم قراره

اطلاعات خاصی رو از وبلاگ بکشیم بیرون اما تفاوت اونها در آرگومانشون هست یعنی همون اسمی که بین () قرار میگیره... که کاملا مشخصه که هر اسم چیکار میکنه ، مفهوم ..!؟

خوب الان تنها چیزی که در قالب داریم عنوان و توضیح سایتمون هست ، درست؟ حالا قبل از اینکه کاری دیگه ای انجام بدیم ، اجازه بدین به استایلش بپردازیم ! البته بازهم میگم ، شما

میتونید این کار رو آخر سر انجام بدین ولی خوب ما قراره که اینجا یه چیزی رو یاد بگیریم ! فرض من در اینجا این هست که خیلی کم با html و css آشنا هستین ! اگر هم مثل من هیچی

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

طرحی که من قراره پیاده کنم رو در شکل میبینید ! البته این یک طرح کلی هست و همینطور که بریم جلو به جزئیات بیشتر میپردازیم !

[تصویر:  99425042357128923525.gif]

حالا عنوان سایت رو داخل تگ <hx> قرار میدیم البته هیچ اجباری به این کار نیست ولی میتونه برای سئوی سایتتون مفید باشه !! در نهایت به این شکل خواهیم داشت ، لازم به ذکر

هست که بگویم هدینگ ها از 1 تا 6 شماره گذاری شده اند که من در اینجا از <h2> استفاده میکنم !
کد php:
<h2><?php bloginfo('name'); ?></h2> 

قاعدتا باید از <h1> استفاده کنم ولی خوب من اینجا دوست داشتم که 2 بذارم ! باید بگم که خیلی ها بزرگترین سایز رو بهونه میکنند ولی به نظر من برای سئو راه های بهتری هم هست

! یه راه دیگر اینکه اگه تصور میکنید که باید دقیقا از H1 استفاده کنید اما خیلی بزرگه و شکل قالبتون به هم میریزه میتونید اندازه فونتش رو توی فایل استایل تغییر بدین ، پس جای هیچ

نگرانی نیست ! طبق مراحل بالا برای قسمت توضیحات هم یک هدینگ در نظر میگیریم که من برای اون <h4> قرار میدهم .. دیگه وقتشه که این قسمت رو استایل بدیم یعنی نه تنها

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

[تصویر:  82418255375548109733.gif]

هدر رو به عنوان یه باکس جدا در نظر میگیریم و عنوان سایت رو در این قسمت محصور میکنیم ! پس باید این دو کد رو بین یک باکس یا همون دایو قرار بدیم ! به این شکل ...

کد php:
<div id="header">
<
h1><?php bloginfo('name'); ?></h1>
<?php bloginfo('description'); ?>
</div> 

من به این دایو یک آدی به نام header اختصاص دادم تا بتونم بیشتر روش کنترل داشته باشم ! مثلا برای استایل و ... ! خوب ، فایل style.css موجود در قالبتون رو باز کنید و کدهای زیر رو

داخلش کپی کنید !

کد:
#header{
width:900px;
height:110px;
margin:auto;
border:solid 1px #999999;
background-color:# fbfde7;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
}

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

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

کد php:
<link rel="stylesheet" type="text/css" href="style.css"/> 
واقع در بالای صفحه ایندکس رو پیدا کنید و به جای style.css دقیقا کد زیر رو قرار بدین ..

کد php:
<?php bloginfo('stylesheet_url'); ?>

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

استایل هدینگ ... برای اونا هم یه شکل و قیافه خاص در نظر میگیریم .. دیگه خودتون میدونید که باید کدهای زیر رو در کجا قرار بدهیم !

کد:
h2{
font-family:Tahoma;
text-align:center;
text-shadow:2px 1px 3px #996600;
}

h5{
font-family:Tahoma;
text-align:center;
color:#0066FF;
    }

اگه دقت کرده باشین برای H2 و h5 از فونت تاهوما استفاده کردم .. من قصد دارم تا برای همه جا هایی که از متن استفاده شده از این فونت استفاده کنم .. اما با انجام چنین کاری واقعا

1- وقتمون رو به هدر میدهیم 2- کدها رو الکی شلوغ میکنیم 3- حجم فایل رو بیخودی افزایش میدیم و .. پس بهترین کار این هست که من یه بار از این فونت درکل بدنه استفاده کنم تا هر

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

کدهای زیر رو قبل از همه کدها و بعد از اون کامنتی که در جلسه دوم قرار دادیم ، میذاریم !

کد:
body{
background-color:#286266;
font-family:Tahoma;    
margin:0 0 0 0;
padding:0 0 0 0;
    }
[align=left][align=left][align=left]

کدهای فایل استایل ما تا الان باید به صورت زیر باشه :

کد:
/*  
Theme Name: wp
Theme URI: http://www.wp-help.ir
Description: یه توضیح کوچیک در مورد قالب و یا هر چیز دیگه
Version: 1.0
Author: css in wp-help.ir
Author URI: همه جای ایران سرای من است
*/


body{
background-color:#286266;
font-family:Tahoma;    
margin:0 0 0 0;
padding:0 0 0 0;
}

#header{
width:900px;
height:110px;
margin:auto;
border:solid 1px #333;
background-color:# fbfde7;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
}
h2{
text-align:center;
text-shadow:2px 1px 3px #996600;
}
h5{
text-align:center;
color:#0066FF;    
}

شما باید تا الان خسته شده باشید ! اگه راستشو بخواین من که از بس تایپ کردم خسته شدم .. پس تا قسمت بعدی مواظب خودتون باشید .


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.




پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
پشتیبانی وردپرس