اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.
امروز روز آخریه که طراحی میکنیم یعنی جمع بندی یک سری نکات است که من توی این مدت یادداشت کردم که بگم.
اول اینکه برای استفاده از نقل قول در نوشته ها میتونید روی علامت اون در قسمت ویرایش نوشته کلیک کنید و اون قسمت نوشته رو از بقیه متمایز کنید مثل زمان هایی که من کدها رو جدا میکنم.
ویرایش گر با کلیک شما بر روی این علامت نوشته ی انتخاب شده رو داخل تگ blockqute قرار میده و حتما میدونید برای استایل یک تگ در css چه باید کرد:
blockquote{
margin:8px;
}
نکته: سعی کنید در فایل css اول از تگ های عمومی مثل body و مثلن تگهای h و blockquote شروع کنید، یعنی الان این کد رو بالاتر از wrapper بنویسید.
یکم margin میدیم بهش تا از اطراف یک فاصله ای داشته باشه.
blockquote{
margin:8px;
padding:8px 25px 8px 25px;
}
میتونید در فایل rtl هم padding دوم و چهارم (چپ و راست) رو تغییر بدین با ندین!
همینطور میتونید رنگش رو عوض کنید و یک border دورش بکشید:
blockquote{
margin:8px;padding:8px 25px 8px 25px;
background:#999;border:1px #069 solid;
}
نکته ی کوچک دیگه اینه که میتونید button ها یا همون دکمه هاتون رو در تمام سایت به یک شکل در بیارین به ایسن صورت که به همه ی اونها یک کلاس اختصاص بدین مثل buttons و اونها رو به شکل مورد نظر تغییر بدین.
در مورد navigation در single.php مثلا شما میخواهید در دو طرف به جای علامتهایی که قبلا نوشتیم 2 عکس قرار بدین مثل شکل زیر:
برای اینکار وارد single.php میشیم و کد زیر رو جایگزین کد نوشته شده در تگ navigation میکنیم:
<span class=”prev”><?php previous_post_link(‘ %link’) ?></span>
<span class=”next”><?php next_post_link(‘ %link ‘) ?></span>
<div class=”fixed”> </div>
در اینجا لینک قبلی و بعدی رو جداگانه در تگهای span قرار دادیم.
و در style.css کد زیر رو مینویسیم:
.fixed{
clear:both;
}
.navigation .prev a {
background:url(img/prev.gif) no-repeat;
padding-left:22px;
float:left;
height:18px;
line-height:16px;
}
.navigation .next a {
background:url(img/next.gif) no-repeat;
padding-right:22px;
float:right;
height:16px;
line-height:16px;
}
img یک فولدر در amoozesh است.
میتونید چند رنگ از این فلش ها رو از لینک زیر دانلود کنید:
fixed فقط به منظور clear:both ساخته شده و سود دیگری ندارد!
همونطور که میدونید یک سری از اینها سلیقه ای و یک سری نیمه واجبن! دیگه احتمالن خیلی راحت تر با این کدها بازی میکنید و من فقط راهنمایی میکنم.
یک ترفند هم بگم
مثلا شما یک منو در یک تم وردپرس میبینید که صفحات رو لیست میکنه(مثلا تم من) شما از اونجایی که تم رو دانلود کردید و همه ی فایلها رو دارین میتونین با استفاده از inspect elements اون قسمت و آی دی و غیره رو پیدا کنید و همچنین در فایل css تم قسمت های مربوط به منو رو در تم خودتون قرار بدین!
از اونجایی که این تم ها معمولن رایگان هستند و دلیلی نداره برق رو دوباره اختراع کرد میتونید از این فایلها استفاده کنید.
مثلا این منوی سایت من هست (تمی که در حال حاضر استفاده میکنم) و میتونید دانلود کنید و با یکسری تغییرات ازش استفاده کنید.
در مورد سایدبار و تعداد اون!
شما میتونید حتی در زیر سایت هم قسمتهایی مثل سایدبار درست کنید و از widget هم در اونها استفاده کنید.
برای تعداد ساید بار تا اونجایی که من میدونم محدودیتی نیست! مثلا من اگه بخوام میتونم دو سایدبار در کنار هم داشته باشم برای اینکار به صورت زیر عمل میکنیم:
اول وارد functions.php میشیم و عدد 1 رو به 2 تغییر میدیم و یا میتونیم مثل فایل زیر خودمون برای سایدبارها اسم بزاریم:
اگر اسمی برای سایدبارها انتخاب نکنیم وردپرس اتوماتیک براشون اسم قرار میده (شماره بندی میکنه) و نیازی هم نیست که کار خاصی بکنید فقط کاری رو که در sidebar.php انجام دادیم تکرار میکنیم و کد زیر رو به انتهای sidebar.php اضافه میکنیم:
<div id=”right-sidebar” class=”sidebar”>
<ul>
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
<?php endif; ?>
</ul>
</div>
همونطور که میبینید من یک آی دی هم اضافه کردم که برای css به دردمون میخوره.
اگر function.txt رو که من نوشتم رو دانلود کردین لازمه که در sidebar.php 2 تغییر ایجاد کنید و همون نامهایی که در function هستند رو به سایدبار مربوطه به صورت زیر اضافه کنید:
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘left sidebar’) ) : else : ?>
به همین راحتی!فقط مونده استایل کردن که باید خودتون بتونین انجام بدین یعنی مثلا width رو در sidebar. تعییر بدین و نصف کنید یا از این قبیل کار ها
مورد دیگه به داشبورد مربوط میشه و قسمت نمایش یا appearance که تم ها در اون قرار دارن اگه میخواهید عکس تمتون در این صفحه سفید نباشه و نمایش داده بشه میتونید با هر برنامه ای خواستید عکسی از صفحه ی اصلی سایت بگیرید و با ابعاد مناسب در فولدر آموزش به اسم screenshot قرار بدین مثل این
این هم از این،برای فارسی کردن فرم نظر دهی (برای کامپیوتر هایی که کیبورد فارسی ندارند) به سایت ashoob.net برین و آموزش موجود در اون رو بخونید و farsitype.js رو هم دانلود کنید و طبق آموزشهایی که قبلن گفته شده در هدر include کنید.(من قبلا فرم نظردهی رو با این اسکریپت سازگار کردم) و احتمالن مشکلی نخواهید داشت!
و آخرین نکته ای که به ذهنم رسیده و میرسه اینه که بتونید از __ برای ترجمه ی قسمتهایی از توابع php موجود استفاده کنید.
مثلا برای نمایش فارسی تعداد نظرات در زیر هر پست میتونید به شکل زیر عمل کنید و کد زیر رو جایگزین خطی کنید که مربوط به نمایش لینک نظر دهی در postmetadata در فایلهایی مثل index.php بود:
<?php comments_popup_link(__(‘No comments’, ‘tenet’), __(‘one comment’, ‘tenet’), __(‘% comments’, ‘tenet’)); ?>
تابع __ مثل e_ عمل میکنه و کارش تقریبن همونه پس چیز خاصی نیست! با رفتن به languages و باز کردن فایل زبان میتونید با بارگذاری مجدد اضافه شدن این سه رشته یا نوشته رو ببینید.
امیدوارم این سری آموزش کمکی به شما کرده باشه، همونطور که به من کمک کرد تا دوستای خوبی مثل شما عزیزان رو پیدا کنم.
من تمام سعیم رو کردم که بتونم به جامعه ی وبلاگ نویسان و طراحان وب کمکی کرده باشم تا هم وبلاگهای زیباتری ببینیم و هم در سایت اصلی وردپرس قالب هایی با نام ایران برای دانلود همه ی جهان قرار داده بشه تا یک خدمتی به این پروژه و در مجموع به وب فارسی کرده باشیم.
امیدوارم بتونم باز هم دلیلی برای نوشتن پیدا کنم و چیزی داشته باشم که راجع به اون بنویسم.
لطفا اگر نظر یا پیشنهادی دارین با من در میون بذارین و همینطور اشکالات من در این آموزشها رو گوشزد کنید تا یک مجموعه ی کم اشکال داشته باشیم.
ممنون که منو همراهی کردین.
به امید دیدار
تی سی!
بای بای
سلام
خسته نباشي اميدوارم در همه مراحل زندگي موفق باشي حق نگهدار دست شما درد نکند
ممنون آقاي يزدان پرست.
شما هم همينطور…
سلام
اقای سیاوش عزیز می شه ایمیلت رو بدی من در بخش 5 به مشکل خوردم می خواستم باهات صحبت کنم
مشکل من اینه که وقتی کد هایی که گفتی برای indexphp رو دانلود کردم و کپی کردم و فایل استایل رو ساختم اما بازم ارور می ده
می شه یه لطفی بکنی ایمیلت رو برام سند کنی یا یه پیغام بدی تا باهات بیشتر مشکل رو در میون بگذارم
ایمیل من :
totti_love1414@yahoo.com
مرسی از زحمات و سایت و پشتیبانیت
از صفحه ارتباط با ما میتونین باهام در تماس باشین
فقط ميتونم بگم که عالي بود
ممنون پوريا جان
سلام داشتم از اون لينكي كه داده بودي wp رو دانلود مي كردم و اين صفحه جلوم بود . متوجه يه چيزي شدم :
“img يک فولدر در amoozesh است.
ميتونيد چند رنگ از اين فلش ها رو از اينجا دانلود کنيد”
پس لينكش كو؟
ببخشيد، خجلم 😀
خسته نباشید!
آموزشها عالیست
navigation لینکش خرابه، لطف مکنید، اگه درستش کنید
با عرض سلام خدمت جناب كشميري ببخشيد اينجا سوالم رو مي پرسم ، من شروع به كثيف كاري كردم و كار هاي زيادي انجام دادم اما به مشكلاتي بر خوردم : براي wrapper بوردر (border) گذاشتم اما نمي دونم چرا فقط توي IE نمايش داده شد ، و همچنين در تقويم text-align رو در center قرار دادم ولي باز هم فقط در IE نمايش داده شد.راهي هست كه هردو در مرورگرهاي ديگري همچون opera و google chrome نمايش داده شود ؟ بعد سوال ديگري داشتم اگر احيانا به سايت http://www.dementor.ir و يا http://www.twilight.ir برويد منوي قالب آنها حالت زيبايي دارد چگونه ما هم مي توانيم از اين منو ها بگذاريم و يك سوال ديگر : در sidebar شما تازه ترين ها هست مي شود بگوييد كدش چيست ؟ و همچنين در برخي از سايت ها (مثل دمنتور كه آدرسش رو نوشتم) پر بازديد ها رو هم مي نويسد
مي شود بگوييد كه آن هم چه كدي دارد ؟ با تشكر از شما
براي border در css بايد جنسش رو هم جامد يعني همون solid قرار بدين تا نمايش بده و مثلا 2px!! براي text-align هم حتما خوب نشونه نرفتين! بايد ببينيد که دقيقا چيو ميخواين وسط چين بشه (با inspect elements در گوگل کروم يا firebug در فايرفاکس) و بعد تگ مورد نظر رو هرف قرار بدين.
براي منو هم که فرمودين بهترين کار دزديه! يعني يک تم که منوي زيبايي داره دانلود کنيد و قسمت منو و همينطور css مربوط به اون رو تو قالب خودتون کپي کنيد! نوشته هاي تازه در قسمت ابزارک ها موجوده. براي پر بازديد ها هم از ابزارک statepress استفاده کنيد.
بايد بيشتر کثيف کاري کنيد!
موفق باشيد
كاري كه گفتين رو كردم ولي نشد در ضمن نمي شه تمي رو كه مي سازيم توي وبلاگ وردپرس (از مدل http://www.yourname.wordpress.com) قرار بديم ؟
چرا ميشه يعني من يکي دو روز پيش فهميدم ميشه! يادم نيست چه جوري اما يک سرچ کوچيک کنيد پيدا نکردين من يه سرچ کوچيک ميکنم!!!
در ضمن نكته اي رو راجع به اين كه بوردر در opera چگونه نمايش داده مي شه بگم : بوردر فقط در بالاي هدر به صورت مستطيلي كوچك است ، اما در IE سالم است و همچنين تقويم هم در IE سالم است
سلام. سه روز هست که پاي اين آموزشها نشسته‌م. خوندم. انجام دادم و لذت بردم. خسته نباشيد. فقط جاي يه سري آموزش درباره‌ي عکس و بک‌گراند و اينا خالي بود. موفق باشيد.
خيلي چيزها هست که من بلدم اما کسي بهم ياد نداده، و اتفاقن خيلي بهتر بلدم چون خودم رفتم سراغش تا بالاخره ياد گرفتم، اين يک آموزش پايه بود که با تمرين به ثمر ميرسه، ممنون از بازديد و نظرتون
سلام سياوش جان واقعا تشکر مي کنم از آموزش کامل و جامعي که گذاشتي واقعا عالي بود . من تمام آموزش رو خوندم و در آخر گفتم که بدون تشکر کردن اصلا راخت نيستم که از اين آموزش استفاده کنم ! باز هم از همه زحماتي که کشيدي تشکر مي کنم دوست عزيز .
اميدئارم تو تمام مراحل زندگيت موفق باشي .
اميدوارم بتوينين کارهاي زيبايي انجام بدين، ممنون از نظرتون، لطف کردين
بازم سلام سياوش جان من وقتي کارام آماده بشه حتما نمونشو واست ميزارم که از اين آموزشي جامعي کع گذاشتي پشيمون نشي داداش . يه چيزي ميزنم که مورد پسندت قرار بگيره حتما ! به هر حال منتظر باش داداش . اگه که اهل ياهو هستي لطف کن اين آيدي منو اد کن (milad.graphic) منتظرم داداش .
سلام آقا سياوش اگر يادتون باشه راجع به قرار دادن تمي كه ساختم در وبلاگ ورد پرس (yourname.wordpress.com) ازتون پرسيدم شما گفتيد سرچ كنم اگه نشد بگم شما سرچ كنيد ، حالا اشكالي نداره سرچ كنيد ؟
دوست عزيز طبق سوال و جواب هاي اين صفحه http://en.forums.wordpress.com/topic/how-to-apply-my-downloaded-wp-theme
شما نميتوني اينکار رو انجام بدي! يعني ميتوني از تم هاي آماده استفاده کني! اما مگه اون تم ها رو کي ساخته؟! مردم ديگه! شما هم احتمالا ميتوني تم خودت رو آپلود کني اما نه به راحتي! بهترين کار خريد هاسته ، شرمنده اگه نتوونستم کمک کنم!
با سلام
من تقريبا از اين راهنما تمي رو که ميخوام ساختم . فقط مونده توي يه سطر قرار دادن چند قسمت قالبم .
يعني من ميخوام آرشيو و دسته بندي قالب بجاي اينکه ستوني زير هم رديف بشه ، در يک سطر قرار بگيره و چند ستون . اما اصلا نمي‌دونم که چطور بايد سطر ايجاد کنم .
ممنون مي‌شم اگر راهنمايي کنيد .
يا علي
اين کار با css انجام ميشه، ميتونين از قالب هايي که به اين صورت هستن تقلب کنيد! با inspect elements بررسي کنيد اون قسمت رو و بعد ببينيد توي فايل style چه کاري کردن، يک نگاهي هم به کد نوشته شده در index هم بندازين بد نيست.
سوالي داشتم:
من دارم سايت فوتوگالري طراحي ميکنم.
آيا ميشه طوري طراحي کرد که وقتي کاربر روي يک عکس کليک کرد به صفحه جديد بره طوري که کانتنت سايت تغيير کنه ولي فوتر و هدر ثابت بمونن يعني لارم نباشه که هدر و فوتر دوباره لود بشه.مثل سايتهايي که با XML طراحي ميشن.
اميدوارم منظورمو متوجه شده باشين
به اين ميگن AJAX که بايد بلد باشي، اگه نيستي بايد بري ياد بگيري، اگه نميخواي ياد بگيري از وردپرس و پلاگين هاش استفاده کن، اگه نميخواي هم google it !!!
ايول ,
1- حالا اين AJAXO سرعت لود صفحه بالا ميبره يا پايين؟
2- به نظر شما از روش قديمي باز شدن در پنجره جديد استفاده کنم يا از AJAX ؟
راستي اين آدرس سايت گوگل دات کام چيه؟!!!
AJAX دير لود ميشه اما وقتي لود شد ديگه کار آسون ميشه و سرعت ميره بالا، پيشنهاد من AJAX است!
اونم آدرس نبود اصطلاح بود، يعني سرچ کن عزيز جان
مشکل همينجاست ديگه عزيز تو ايران کاربران با دايلاپ سايت باز ميکنن و تازه صبر هم ندارن سريع ميبندنش!
اون اصطلاح فهميدم خواستم شوخي کنم 🙁
سلام…
1- با اجازتون من کل سري تدريستون رو دانلود کردم!!
2- خيلي خيلي ممنونم بابت اين آموزش نسبتاً کامل و روان و دقيق…
3- من يک مشکلي دارم! ميخوام 2تا سايدبار داشته باشم که دو سمت قرار بگيرن… اين کار رو انجام دادم، ولي اون قسمت مطالب رو وسط نشون ميده، بعدش مياد سايدبار ها رو پائين صفحه، دو سمت قرار ميده…
چيکار کنم درست شه؟ بشه يه سايدبار رو دو شقه کرد! مثل کاري که شما اينجا کردين… چيکار کنيم؟
1- خواهش ميکنم، اميدوارو به دردتون بخوره
2- 🙂
3- بهترين کار همونطور که هميشه گفتم اينه که يه تم که اينجوريه رو دانلود کنيد و بررسي کنيد که چيکار کرده اين مشکلي که شما داري احتمالن با float:left يا float:right در فايل css حل ميشه، به عرض ها (width) هم توجه کنيد که زياد از حد نباشن.
سلام آقا سیاوش
واقعا دستت درد نکنه
آموزش خیلی خوب و عالی بود و خیلی هم به دردم خورد
خواهش میکنم حامد جان، موفق باشی
سلام و خسته نباشید خدمت شما که تا بدینجا این آموزش ها رو دنبال کردید و در شرایط مختلف زندگیتون خودتون رو موظف به نوشتن این مطالب کردید
خواستم بگم خیلی زیبا می شه که اگر شما خودتون زحمت پی دی اف کردن ای آموزش ها رو از ابتدا تا به انتها که همینجا باشد انجام بدهید و با نام خودتان در وب پخش کنید
هم تاثیر گذار تر خواهد بود و هم اینکه راهیست در جهت هر چه بیشتر موفق شدن خودتان
و اینکه افرادی مثل من که به آخرینش رسیدن می تونن با پرینت گرفتن فایل در هر زمان که بخواند مطالبتون رو در دست داشته باشند و ازش برای حل مشکلاتشون استفاده کنند
متشکر و ممنون
Your blog theme looks cool. What template did you use ?
ایول خیلی آموزش کاملی بود
دستت درد نکنه!
با سلام
يه در خواست داشتم خيلي خوب مي شد كه اين پوسته اموزش رو به طور كامل با دو سايد بار واسه دانلود قرار بديد چون من هر كاري كردم نتونستم دو سايد بارش كنم با تشكر سعيد اميني
لطف کنین قالبی که ساختین رو برام بفرستین تا توی همون براتون توضیح بدم چیکار کنین، ایمیل من هم بالای صفحه ی وبلاگ هست، ممنون:)
سلام
من بعد از حدودا یک سال که از وب دور بودم برای بار دوم آموزش کامل شما را خوندم خیلی ممنونم خیلی چیز ها یاد گرفتم و زمینه برای یاد گرفتن یه چیزای دیگه(مثلا جی کوئری)برام ایجاد شد.
باز هم ممنون
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
🙂
سلام سیاوش جان.
من یه 1 سالی دیر اومدم :دی ببخشید!
خیلی خیلی ازت ممنونم بابت آموزش هات.
خیلی کار خوبی کردی که نوشتی.
راستی. کاش فقط اینا رو یه جایی تو وردپرس هم معرفی میکردی. که همه راحت بتونن استفاده کنن!
مثلاً به codex ها وردپرس اظافه می شدن بد نبود!
چون خودم تو گوگل که دنبالش گشتم چیز خاصی دستگیرم نشد! به جز تبلیغات!!!!!
اینجا رو هم خیلی اتفاقی پیدا کردم! یادم نیست چه جوری!
بازم از مطالبت تشکر میکنم.
امیدوارم همیشه سربلند باشی 🙂
سلام
من هنوز همه آموزش شما رو نخوندم و تازه شروع کردم به خوندن آموزش باید بگم واقعا آموزش خوب و کاملیه از بقیه آموزش هایی که من دیدم قابل فهم تره همین جا جا داره از شما بابت این آموزش تشکر کنم
سلام.
اول از همه باید بگم دستتون درد نکنه واقعا زحمت کشیدید خیلی خوب بود
دوم باید بگم از مطالب شما با ذکر نام سایت به عنوان منبع برای پروژه پایان نامه ام کمک گرفتم راضی باشید
ممنون، موفق باشین:)
دستت درد نکنه پسر
خدا خیرت هم بده
یاعلی
ممنون
بازهم آموزش بذارین
مثلن خاص فارسی سازی تم
سلام دوسته عزيز
عالي بود
با اجازتون اين مطالبو تو سايتم گذاشتم
البته منبع رو هم ذكر كردم
متشكرم
سلام خسته نباشید من به یه مشکل برخوردم
من می خوام یک عکسbackground برای قسمتی از سایتم به وسیله ی css بزارم اما وقتی background را قرار می دهم متاسفانه میره روی header در حالی که می خوام بره زیره header راستی من برای background یک div جدا در نظر گرفتم. اگه کدی هست که الویت بده به header در css لطف میکنی برام بفرستی.
با تشکر از شما و سایت زیباتون
احتمال این قضیه که هدر float داشته باشه و تگ مورد نظرتون بره بالا زیاده، با برداشتن float یا گذاشتن یه تگ خالی با استایل clear:both بین هدر و اون تگ میتونین اگه مشکل این باشه حل کنین، ولی دقیق نمیتونم بگم چون ندیدمش
سلام
واقعا خسته نباشی
ساده تر ازین نمیشد توضیح بدی
خیلی استفاده کردم
مرسی از زحماتت
سلام ؛ امروز يكله آموزش هاي شما رو خوندم ( از 11 صبح تا 11 شب !!!! ) خيلي خيلي خيلي بدردم خورد اميدوارم هميشه موفق و شاد باشيد .
سیاوش جان لینک فانکشن رو کجا گذاشتی.!!!!!!!!!!!!!!!؟ نیست که.
لینک نداره که توی درسی که راجع به ساختن ویدجت بود توضیحش دادم
ممنونم از اینکه وقت گذاشتی و با حوصله انقدر ساده برای تازه کارها توضیح دادی ، موفق باشی.
آقا سیاوش
میشه بگی چطوری مثل قالب خودت اخرین مطالب هر موضوع رو تو صفحه اصلی نمایش بدم؟
یا سایت مهن لرن یا..
چیزی باید به functions.php اضاف کنم؟
نه لازم نیست چیزی تو فانکشن اضافه کنید کافیه از کدهایی که اینجا توضیح داده شده استفاده کنید http://codex.wordpress.org/Function_Reference/query_posts
عالی بود . ممنون از اموزشهای زیبایی که گذاشتی :ایکس
سلام داداش مطالبتو سیو کردم امیدوارم به دردم بخوره فقط یه چیزی من این کارو برای یه طراحی وب ساده میخواهم برا دانشگاه متونی کد کامل php, css , … رو برام ایمیل کنی؟ ممنون میشم
متاسفانه الان ندارم فایلها رو