آموزش طراحی قالب وردپرس #۱۶(جمع بندی-پایان)

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

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

امروز روز آخریه که طراحی میکنیم یعنی جمع بندی یک سری نکات است که من توی این مدت یادداشت کردم که بگم.

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

ویرایش گر با کلیک شما بر روی این علامت نوشته ی انتخاب شده رو داخل تگ 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 مثلا شما میخواهید در دو طرف به جای علامتهایی که قبلا نوشتیم ۲ عکس قرار بدین مثل شکل زیر:

برای اینکار وارد 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 است.

میتونید چند رنگ از این فلش ها رو از لینک زیر دانلود کنید:

navigation (969 دانلود ها)

fixed فقط به منظور clear:both ساخته شده و سود دیگری ندارد!

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

یک ترفند هم بگم

مثلا شما یک منو در یک تم وردپرس میبینید که صفحات رو لیست میکنه(مثلا تم من) شما از اونجایی که تم رو دانلود کردید و همه ی فایلها رو دارین میتونین با استفاده از inspect elements اون قسمت و آی دی و غیره رو پیدا کنید و همچنین در فایل css تم قسمت های مربوط به منو رو در تم خودتون قرار بدین!

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

مثلا این منوی سایت من هست (تمی که در حال حاضر استفاده میکنم) و میتونید دانلود کنید و با یکسری تغییرات ازش استفاده کنید.

در مورد سایدبار و تعداد اون!

شما میتونید حتی در زیر سایت هم قسمتهایی مثل سایدبار درست کنید و از widget هم در اونها استفاده کنید.

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

اول وارد functions.php میشیم و عدد ۱ رو به ۲ تغییر میدیم و یا میتونیم مثل فایل زیر خودمون برای سایدبارها اسم بزاریم:

اگر اسمی برای سایدبارها انتخاب نکنیم وردپرس اتوماتیک براشون اسم قرار میده (شماره بندی میکنه) و نیازی هم نیست که کار خاصی بکنید فقط کاری رو که در 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 کنید.(من قبلا فرم نظردهی رو با این اسکریپت سازگار کردم) و احتمالن مشکلی نخواهید داشت!

farsitype.js (762 دانلود ها)

و آخرین نکته ای که به ذهنم رسیده و میرسه اینه که بتونید از __ برای ترجمه ی قسمتهایی از توابع php موجود استفاده کنید.

مثلا برای نمایش فارسی تعداد نظرات در زیر هر پست میتونید به شکل زیر عمل کنید و کد زیر رو جایگزین خطی کنید که مربوط به نمایش لینک نظر دهی در postmetadata در فایلهایی مثل index.php بود:

<?php comments_popup_link(__(‘No comments’, ‘tenet’), __(‘one comment’, ‘tenet’), __(‘% comments’, ‘tenet’)); ?>

تابع __ مثل e_ عمل میکنه و کارش تقریبن همونه پس چیز خاصی نیست! با رفتن به languages و باز کردن فایل زبان میتونید با بارگذاری مجدد اضافه شدن این سه رشته یا نوشته رو ببینید.

امیدوارم این سری آموزش کمکی به شما کرده باشه، همونطور که به من کمک کرد تا دوستای خوبی مثل شما عزیزان رو پیدا کنم.

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

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

لطفا اگر نظر یا پیشنهادی دارین با من در میون بذارین و همینطور اشکالات من در این آموزشها رو گوشزد کنید تا یک مجموعه ی کم اشکال داشته باشیم.

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

به امید دیدار

تی سی!

بای بای

 

‏58 دیدگاه برای ”آموزش طراحی قالب وردپرس #۱۶(جمع بندی-پایان)

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

    1. سلام
      اقای سیاوش عزیز می شه ایمیلت رو بدی من در بخش ۵ به مشکل خوردم می خواستم باهات صحبت کنم
      مشکل من اینه که وقتی کد هایی که گفتی برای indexphp رو دانلود کردم و کپی کردم و فایل استایل رو ساختم اما بازم ارور می ده
      می شه یه لطفی بکنی ایمیلت رو برام سند کنی یا یه پیغام بدی تا باهات بیشتر مشکل رو در میون بگذارم

      ایمیل من :

      totti_love1414@yahoo.com

      مرسی از زحمات و سایت و پشتیبانیت

  2. سلام داشتم از اون لینکی که داده بودی wp رو دانلود می کردم و این صفحه جلوم بود . متوجه یه چیزی شدم :

    “img یک فولدر در amoozesh است.
    میتونید چند رنگ از این فلش ها رو از اینجا دانلود کنید”

    پس لینکش کو؟

  3. با عرض سلام خدمت جناب کشمیری ببخشید اینجا سوالم رو می پرسم ، من شروع به کثیف کاری کردم و کار های زیادی انجام دادم اما به مشکلاتی بر خوردم : برای wrapper بوردر (border) گذاشتم اما نمی دونم چرا فقط توی IE نمایش داده شد ، و همچنین در تقویم text-align رو در center قرار دادم ولی باز هم فقط در IE نمایش داده شد.راهی هست که هردو در مرورگرهای دیگری همچون opera و google chrome نمایش داده شود ؟ بعد سوال دیگری داشتم اگر احیانا به سایت http://www.dementor.ir و یا http://www.twilight.ir بروید منوی قالب آنها حالت زیبایی دارد چگونه ما هم می توانیم از این منو ها بگذاریم و یک سوال دیگر : در sidebar شما تازه ترین ها هست می شود بگویید کدش چیست ؟ و همچنین در برخی از سایت ها (مثل دمنتور که آدرسش رو نوشتم) پر بازدید ها رو هم می نویسد
    می شود بگویید که آن هم چه کدی دارد ؟ با تشکر از شما

    1. برای border در css باید جنسش رو هم جامد یعنی همون solid قرار بدین تا نمایش بده و مثلا ۲px!! برای text-align هم حتما خوب نشونه نرفتین! باید ببینید که دقیقا چیو میخواین وسط چین بشه (با inspect elements در گوگل کروم یا firebug در فایرفاکس) و بعد تگ مورد نظر رو هرف قرار بدین.
      برای منو هم که فرمودین بهترین کار دزدیه! یعنی یک تم که منوی زیبایی داره دانلود کنید و قسمت منو و همینطور css مربوط به اون رو تو قالب خودتون کپی کنید! نوشته های تازه در قسمت ابزارک ها موجوده. برای پر بازدید ها هم از ابزارک statepress استفاده کنید.
      باید بیشتر کثیف کاری کنید!
      موفق باشید

  4. در ضمن نکته ای رو راجع به این که بوردر در opera چگونه نمایش داده می شه بگم : بوردر فقط در بالای هدر به صورت مستطیلی کوچک است ، اما در IE سالم است و همچنین تقویم هم در IE سالم است

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

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

  6. سلام سیاوش جان واقعا تشکر می کنم از آموزش کامل و جامعی که گذاشتی واقعا عالی بود . من تمام آموزش رو خوندم و در آخر گفتم که بدون تشکر کردن اصلا راخت نیستم که از این آموزش استفاده کنم ! باز هم از همه زحماتی که کشیدی تشکر می کنم دوست عزیز .
    امیدئارم تو تمام مراحل زندگیت موفق باشی .

  7. بازم سلام سیاوش جان من وقتی کارام آماده بشه حتما نمونشو واست میزارم که از این آموزشی جامعی کع گذاشتی پشیمون نشی داداش . یه چیزی میزنم که مورد پسندت قرار بگیره حتما ! به هر حال منتظر باش داداش . اگه که اهل یاهو هستی لطف کن این آیدی منو اد کن (milad.graphic) منتظرم داداش .

  8. سلام آقا سیاوش اگر یادتون باشه راجع به قرار دادن تمی که ساختم در وبلاگ ورد پرس (yourname.wordpress.com) ازتون پرسیدم شما گفتید سرچ کنم اگه نشد بگم شما سرچ کنید ، حالا اشکالی نداره سرچ کنید ؟

    1. دوست عزیز طبق سوال و جواب های این صفحه http://en.forums.wordpress.com/topic/how-to-apply-my-downloaded-wp-theme
      شما نمیتونی اینکار رو انجام بدی! یعنی میتونی از تم های آماده استفاده کنی! اما مگه اون تم ها رو کی ساخته؟! مردم دیگه! شما هم احتمالا میتونی تم خودت رو آپلود کنی اما نه به راحتی! بهترین کار خرید هاسته ، شرمنده اگه نتوونستم کمک کنم!

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

    1. این کار با css انجام میشه، میتونین از قالب هایی که به این صورت هستن تقلب کنید! با inspect elements بررسی کنید اون قسمت رو و بعد ببینید توی فایل style چه کاری کردن، یک نگاهی هم به کد نوشته شده در index هم بندازین بد نیست.

  10. سوالی داشتم:
    من دارم سایت فوتوگالری طراحی میکنم.
    آیا میشه طوری طراحی کرد که وقتی کاربر روی یک عکس کلیک کرد به صفحه جدید بره طوری که کانتنت سایت تغییر کنه ولی فوتر و هدر ثابت بمونن یعنی لارم نباشه که هدر و فوتر دوباره لود بشه.مثل سایتهایی که با XML طراحی میشن.
    امیدوارم منظورمو متوجه شده باشین

  11. ایول ,
    ۱- حالا این AJAXO سرعت لود صفحه بالا میبره یا پایین؟
    ۲- به نظر شما از روش قدیمی باز شدن در پنجره جدید استفاده کنم یا از AJAX ؟
    راستی این آدرس سایت گوگل دات کام چیه؟!!!

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

  12. سلام…

    ۱- با اجازتون من کل سری تدریستون رو دانلود کردم!!
    ۲- خیلی خیلی ممنونم بابت این آموزش نسبتاً کامل و روان و دقیق…
    ۳- من یک مشکلی دارم! میخوام ۲تا سایدبار داشته باشم که دو سمت قرار بگیرن… این کار رو انجام دادم، ولی اون قسمت مطالب رو وسط نشون میده، بعدش میاد سایدبار ها رو پائین صفحه، دو سمت قرار میده…
    چیکار کنم درست شه؟ بشه یه سایدبار رو دو شقه کرد! مثل کاری که شما اینجا کردین… چیکار کنیم؟

    1. ۱- خواهش میکنم، امیدوارو به دردتون بخوره
      ۲- 🙂
      ۳- بهترین کار همونطور که همیشه گفتم اینه که یه تم که اینجوریه رو دانلود کنید و بررسی کنید که چیکار کرده این مشکلی که شما داری احتمالن با float:left یا float:right در فایل css حل میشه، به عرض ها (width) هم توجه کنید که زیاد از حد نباشن.

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

  14. سلام و خسته نباشید خدمت شما که تا بدینجا این آموزش ها رو دنبال کردید و در شرایط مختلف زندگیتون خودتون رو موظف به نوشتن این مطالب کردید

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

    متشکر و ممنون

  15. با سلام
    یه در خواست داشتم خیلی خوب می شد که این پوسته اموزش رو به طور کامل با دو ساید بار واسه دانلود قرار بدید چون من هر کاری کردم نتونستم دو ساید بارش کنم با تشکر سعید امینی

  16. سلام
    من بعد از حدودا یک سال که از وب دور بودم برای بار دوم آموزش کامل شما را خوندم خیلی ممنونم خیلی چیز ها یاد گرفتم و زمینه برای یاد گرفتن یه چیزای دیگه(مثلا جی کوئری)برام ایجاد شد.
    باز هم ممنون

  17. سلام سیاوش جان.
    من یه ۱ سالی دیر اومدم :دی ببخشید!
    خیلی خیلی ازت ممنونم بابت آموزش هات.
    خیلی کار خوبی کردی که نوشتی.
    راستی. کاش فقط اینا رو یه جایی تو وردپرس هم معرفی میکردی. که همه راحت بتونن استفاده کنن!
    مثلاً به codex ها وردپرس اظافه می شدن بد نبود!
    چون خودم تو گوگل که دنبالش گشتم چیز خاصی دستگیرم نشد! به جز تبلیغات!!!!!
    اینجا رو هم خیلی اتفاقی پیدا کردم! یادم نیست چه جوری!
    بازم از مطالبت تشکر میکنم.
    امیدوارم همیشه سربلند باشی 🙂

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

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

  20. سلام خسته نباشید من به یه مشکل برخوردم
    من می خوام یک عکسbackground برای قسمتی از سایتم به وسیله ی css بزارم اما وقتی background را قرار می دهم متاسفانه میره روی header در حالی که می خوام بره زیره header راستی من برای background یک div جدا در نظر گرفتم. اگه کدی هست که الویت بده به header در css لطف میکنی برام بفرستی.
    با تشکر از شما و سایت زیباتون

    1. احتمال این قضیه که هدر float داشته باشه و تگ مورد نظرتون بره بالا زیاده، با برداشتن float یا گذاشتن یه تگ خالی با استایل clear:both بین هدر و اون تگ میتونین اگه مشکل این باشه حل کنین، ولی دقیق نمیتونم بگم چون ندیدمش

  21. آقا سیاوش

    میشه بگی چطوری مثل قالب خودت اخرین مطالب هر موضوع رو تو صفحه اصلی نمایش بدم؟
    یا سایت مهن لرن یا..

    چیزی باید به functions.php اضاف کنم؟

  22. سلام داداش مطالبتو سیو کردم امیدوارم به دردم بخوره فقط یه چیزی من این کارو برای یه طراحی وب ساده میخواهم برا دانشگاه متونی کد کامل php, css , … رو برام ایمیل کنی؟ ممنون میشم

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

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