دسته‌ها
وردپرس

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

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

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

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

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

ویرایش گر با کلیک شما بر روی این علامت نوشته ی انتخاب شده رو داخل تگ 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 (838 دانلود ها)

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 (621 دانلود ها)

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

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

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

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

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

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

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

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

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

به امید دیدار

تی سی!

بای بای

 

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۵(فارسی سازی)

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

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

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

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

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۴(امکان نظردهی)

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

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

امروز کارهای اساسی ساخت یک وبلاگ کامل سازگار با زبان های ltr یا چپ به راست تموم میشه و از درس بعدی ما میریم سراغ فارسی کردن یا بهتر بگم سازگار کردن وبلاگ با زبان فارسی.

امروز باید به صفحه ی پست ها یا همون single.php یک فرم نظر دهی اضافه کنیم که کاربران بتونن نظرشون رو راجع به مطلب نوشته شده بنویسن.

ما اول باید یک فایل با فرمت php در فولدر تم بسازیم به نام: comments.php

و کد موجود در فایل زیر رو در comments.php  کپی کنیم.

comments.txt (2303 دانلود ها)

این کد رو من یکم باهاش ور رفتم اما چون مال خیلی وقت پیشه و من اوج حافظه! یادم نیست که چه تغییراتی توش دادم و چه اشکالاتی داره یا نه! اما من از همین توی سایت خودم استفاده میکنم و شما هم میتونین از تم classic یا default که روی خود وردپرس هستند هم استفاده کنین.

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

بعد از دانلود فایل زیر محتویاتش رو در style.css کپی کنید(بهتر است قبل از فوتر کپی کنید.)

comments-stylecheet.txt (1211 دانلود ها)

در ضمن این comment form با farsitype ، اسکریپت معروف کاوه احمدی هم سازگاره و لازم نیست توش تغییری ایجاد بشه بعدن میگم چه کاری با این اسکریپت میشه کرد!

بعد از ذخیره کردن فایل میریم سراغ single.php که این فرم رو باید در بر داشته باشه.

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

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

این تابع comments.php رو لود میکنه و میاره در زیر نوشته ی ما در single.php

بعد از ذخیره ی فایل میتونید تغییرات رو ببینید.

در page.php که مربوط به برگه ها است هم میتونید این کد رو کپی کنید اما معمولا چنین استفاده ای از این صفحات نمیشه.

این هم از این!

بیشتر از ۹۰ درصد تم هایی که میبینید همین کارهایی که ما انجام دادن نه چیزی بیشتر از اون!

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

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

در پست بعدی تم رو با فارسی سازگار خواهیم کرد.

در واقع کار اصلی رو یاد گرفتیم و مونده ترفند و تجربه!

مواظب باشید

بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۳(تقسیم بندی فایلها۲)

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

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

امروز میخواهیم به ساخت فایلهای مهم دیگه ای ادامه بدیم که البته روند کار بسیار آسان است.
ما وقتی روی لینکهای آرشیو سایت کلیک میکنیم به صفحه ای میریم با نام archive که میتونه با index متفاوت باشه (و معمولا هم هست!)
برای اینکه ما archive رو متفاوت از index داشته باشیم:

  • یک فایل archive.php میسازیم/
  • تمام محتوای index.php رو در archive.php کپی میکنیم/
  • فایل رو ذخیره میکنیم/
  • the_content رو پاک میکنیم و به جای اون مینویسیم the_excerpt /

()the_excerpt تابعی است که در صفحه ی آرشیو سایت تمام content یا محتوای مطلب رو نمیاره بلکه یک چکیده مطلب رو نشون میده، و تفاوت عمده ی صفحه ی index با آرشیو هم همینه!
نکته اینکه وقتی مطلب جدیدی در وردپرس مینویسید در زیر محل نوشتن مطلب یک قسمت چکیده هست که همون excerpt ماست.

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

خوب این از این!

یک صفحه ی دیگه ای که وجود داره صفحه ی موضوعات سایت است!

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

با اینکار اگه ما صفحه ای برای موضوعات نساخته باشیم وردپرس از استایل archive.php استفاده میکنه.

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

مورد دیگه جستجو است.

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

  • تمام محتوای archive.php رو در فایلی با نام search.php کپی میکنیم/
  • فایل رو ذخیره میکنیم!/

حالا میریم سراغ دو فایل دیگه!

فایل page که صفحات وبلاگ یا همون برگه هاست و ما میتونیم صفحات مختلفی بسازیم مثلا صفحه ی ارتباط با من یا درباره ی من! که معمولا مثل وبلاگ نیستند و بدون تغییرند.

و فایل دیگه single.php است که مربوط به زمانی است که شما روی یک مطلب کلیک میکنید و در این صفحه میتونید فقط یک مطلب رو بخونید و در ضمن میتونید نظرتون رو هم اینجا وارد کنید.

این دو فایل رو میسازیم و محتویات فایل index رو در این دو کپی میکنیم و فایلها رو ذخیره میکنیم.

برای متفاوت کردن Page با index وارد page.php میشیم و در زیر تابع the_content کد زیر رو مینویسیم:

<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>

و بعد postmetadata رو هم کامل پاک میکنیم تا در نهایت داشته باشیم:

<div class=”entry”>
<?PHP the_content();?>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>
</div>

در نهایت میریم سراغ navigation و div مربوط به اون رو کامل پاک میکنیم چون نیازی بهش نیست اصلا!!یعنی اصلا وجود خارجی نداره!

link_pages برای زمانیه که صفحه ی ما محتوای بسیار زیادی و بلندی داشته باشه ما برای اینکه یک برگه رو به چند قسمت کوچکتر تقسیم کنیم باید موقع نوشتن صفحه در قسمت html editor یا ویرایش html کد زیر رو وارد کنیم:

<!–nextpage–>

مثلا یک برگه میسازیم به نام about و راجع به خودمون مینویسیم و هر موقع حس کردیم زیادی نوشتیم! به ادیتور html میریم و این کد را وارد میکنیم، به همین راحتی!

nextpage

بعد از اینکه page.php رو سیو کردیم میریم سراغ single.php که قبلا اشاره کردم چه موقعی استفاده میشه.

دقیقا مثل کاری که با page.php کردیم میریم و زیر the_content کد زیر رو وارد میکنیم:

<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

شاید نمیدونستید اما حتی پستهای وبلاگ رو هم مثل برگه ها میتوان به قسمت های کوچکتری تقسیم کرد! و این کد برای این نوشته شد!

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

میریم به postmetadata و کد زیر رو پاک میکنیم:

<br /><?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?>

br رو هم پاک کردیم چون یک خط خالی ایجاد میکنه برای همه ی بیننده ها به جز نویسنده که edit براش نمایش داده میشه! پس کار خوبی نیست وجود داشتنش!!

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

<?PHP posts_nav_link(); ?>

<?php previous_post_link ( ‘ &laquo; %link ‘ ) ?> <? php next_post_link ( ‘ %link &raquo ; ‘ ) ?>

خط اولی رو پاک کردیم و دومی رو نوشتیم جاش!

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

ذخیره کنین فایل رو و روی عنوان یکی از نوشته های سایت کلیک کنید تا تغییرات رو ببینید.

سبز باشید!

بای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۲(تقسیم بندی فایلها۱)

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

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

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

header و footer و sidebar و غیره

حسن اینکار اینه که ما مثلا اگه یک زمانی میخواستیم قسمتی از هدر رو تغییر بدیم مجبور نباشیم اینکار رو در Pages و Index و Archive تغییر بدیم، فقط کافیه بریم به Header و اون رو هر کاری خواستیم بکنیم.

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

ما امروز بعد با style کاری نداریم، در درسهای قبل هدر،سایدبار و محتوا رو style کردیم و فوتر هم به هر نحوی دوست داریم میتونیم تغییر بدیم.

به پوشه ی amoozesh میریم جایی که فایلهای style.css و index.php و searchform.php قرار دارند.

۱-فایل index رو باز میکنیم.

۲-notepad رو باز میکنیم و تمام header Div و هر چی بالای اون هست رو از index کپی میکنیم (از شروع فایل index  تا قبل ازشروع div مربوط به content)

۳-در یک فایل جدید به اسم header.php چیزهایی که کپی کرده بودیم رو paste میکنیم.

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

حالا باید در index کاری کنیم که به جای کدی که کپی کردیم از کدی استفاده کنه که در فایل header.php قرار داره!

بنا بر این از یک تابع php استفاده میکنیم:

کد هایی که کپی کرده بودیم  رو پاک میکنیم و با کد زیر جایگزین میکنیم:

<?php get_header () ; ?>

این تابع اتوماتیک فایل هدر رو include میکنه یعنی کاری که الان انجام دادیم میتونیم به صورتی که برای searchform نوشتیم هم بنویسیم:

<?php include (TEMPLATEPATH . ‘/header.php’); ?>

این دو هیچ فرقی ندارن، من از بالای استفاده میکنم، چون دلیلی برای استفاده از پایینی نمیبینم.

با سایدبار هم دقیقا باید همین کار رو انجام میدیم.

۱-یک فایل با نام sidebar.php میسازیم و div مربوط به سایدبار (sidebar Div) رو کپی میکنیم به درون sidebar.php و کد زیر رو جایگزینش میکنیم:

<?php get_sidebar(); ?>

همین کار رو هم با فوتر میکنیم(یادتون نره کارهایی که میکنید رو سیو کنید هااا!)

۱- فایلی با نام footer.php میسازیم.

۲- در index قسمت div فوتر رو کپی میکنیم و در footer.php قرار میدیم.

۳- در index.php کد زیر رو جایگزین میکنیم.

<?php get_footer(); ?>

۴- فایل رو ذخیره میکنیم.

امروز فایل index رو ۴ تکه کردیم.

اینکار برای تغییر دادن theme در آینده بسیار کمکمون میکنه.

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

amoozesh (994 دانلود ها)

لطف کنید اگه اشکالی پیدا کردین بهم بگین، ممنون.

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

۲ یا ۳ جلسه ی دیگه بیشتر نمونده که تموم بشه!

همینطور ۲ یا ۳ روز بیشتر نمونده به امتحانی که من تا حالا یک بار هم درسش رو نخوندم!

فکر کنم باید مشروط شم چون من کلن به این کلمه خیلی علاقه دارم! البته با یک ” ه ” در آخرش!

take care of سلف هاتون!

بابای.

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۱(استایل سایدبار)

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

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

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

در حالت استاندارد در ابزارک ها از تگ های ul و li استفاده میشه (مثل آنهایی که خودمون دستی وارد کردیم در بخش سایدبار) به همین دلیل کافیه که این تگ ها رو به همراه تگهای هدینگ (Hn) هدف قرار بدیم.

برای اشاره به تگهای ul موجود در sidebar باید به صورت زیر عمل کنیم و کدهای زیر رو بنویسیم (کدهای زیر رو بعد از .sidebar و قبل از footer در فایل style.css بنویسید):

.sidebar ul{
margin: 0;
padding: 0 10px 0 10px;

}

میدونیم یا اگرم نمیدونیم از این به بعد میدونیم! که تگ های ul به طور پیش فرض یک margin و padding دارند که ما با این کار اونها رو تحت کنترل خودمون قرار میدیم تا هر مرورگر ساز خودش رو نزنه!

حالا در حالی که مثل همیشه wamp باز است با دو مرورگر FF و IE صفحه ی اول سایت رو میبینیم.

برای برداشتن نقطه های توپر و تو خالی باید یک راهی پیدا کنیم چون خیلی زشتن وجدانن:

.sidebar ul{
margin: 0;
padding: 0 10px 0 10px;

list-style:none;
}

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

اگر با inspect element در chrome یا firebug به سایدبار بریم و نگاهی به شکل ابزارها بندازیم میفهمیم که تگ ها به چه صورتی هستند:

حالا برای هدف قرار دادن li های درون ul های sidebar به صورت زیر عمل میکنیم:

.sidebar ul li{

padding: 5px 0 5px 0;

}

این کد باعث میشه یک فاصله ی ۵ پیکسلی از بالا و یکی هم از پایین ایجاد بشه.

برای هدف قرار دادن هر تگ برای اینکه بدونین دقیقا چه آدرسی باید بدین بهترین راه inspect element است و بس! با اینکار حتی میتونین در سایت ها و وبلاگهای دیگه هم فوزولی نموده و چیزهای جدید یاد بگیرین!

حالا بریم سراغ عناوین هر ابزار موجود در سایدبار!

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

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

.sidebar h2{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

}

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

حالا با دقیق تر شدن میتونیم به آدرس sidebar-ul بریم و بعد هرچه li مربوط به ul میشه رو هدف قرار بدیم:

.sidebar ul ul li{

padding:0;

}

حالا سایدبار بهتر و شکیل تری داریم و میتونیم شکیل تر ترش کنیم!:

.sidebar ul ul li{

padding:0;

line-height:22px;

}

پیشنهاد میکنم line-height رو اول یک عدد کوچک مثل ۱۰ قرار بدین و بعد از دیدن سایت با اون حالت اون رو به هر عددی دوست داشتین تغییر بدین، اینکار رو انجام میدیم که بفهمیم دقیقن چه کاری میکنیم.

حالا شاید این سوال پیش بیاد که برای هدف قرار دادن یک ابزار خاص چیکار باید کرد!

جواب اینه که باید دنبال ID طرف بگردیم!

این کار رو هم با دیدن source که سخت تر خواهد بود و یا با استفاده از inspect elements میشه انجام داد.

مثلا برای تغییر دادن Calendar(فقط Calendar و نه چیز دیگه ای) باید بریم و آیدی اش رو پیدا کنیم:

بعد از پیدا کردن آی دی مورد نظر میتونیم به صورت زیر تغییراتی انجام بدیم مثلا :

#wp-calendar{

width:80%;

margin:auto;

}

این کار باعث میشه سالنامه یا تقویم نوشته های ما به اندازه ی ۸۰ درصد اندازه ی سایدبار کشیده بشه و با margin کاری کردیم که در وسط قرار بگیره.

خسته نباشید دیگه! پلیز!

بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۰(زیباسازی۲)

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

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

مثل همیشه wamp رو باز میکنیم و style.css هم با برنامه ای که داریم اوپن(open)!!

امروز میخواهیم هر چیزی رو بزاریم سر جای خودش!

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

کار بسیار آسون و بدون درد است! نگران نباشید فرزندانم.

یادتون باشه در در هر مرورگری که آزمایش میکنید کار رو آزمایش کنید اما IE هم نگاه کنید که بعضی وقتها چپ رو راست میشنوه و راست رو راشت!

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

من به جای اینکه ازpx یا پیکسل استفاده کنم(که در مانیتورها و رزولوشنهای مختلف متفاوته) از درصد % استفاده میکنم که یا نصف صفحه نپره(در رزولوشن های افتضاح مثل ۸۰۰ در ۶۰۰) یا نصفش سفید نشه در مانیتورهای بزرگ و wide

ما برای اینکه بتونیم همه ی div هایی که ساختیم ( و در واقع تمام صفحه رو کنترل کنیم و بتونیم اون رو از body جدا کنیم تا بتونیم استایل متفاوتی برای هر کدوم داشته باشیم) یک div دیگه در index.php میسازیم که از زیر <body> شروع میشه و تا بالای <body/> ادامه داره:

<body>

<div id=”wrapper”>

</div>

</body>

حالا ما کل body رو در یک تگ جدا کننده قرار دادیم!

میریو با firebug و یا chrome و از طریق inspect elements نگاهی به سایت میندازیم تا مطمئن شیم کارمون رو درست انجام دادیم!

حالا اگه بخواهیم که اندازه ی wrapper درصدی از کل عرض صفحه باشه میریم به style و کد زیر رو مینویسیم:

#wrapper{

width:85%;

}

اینکار باعث میشه عرض صفحه ای که ما داریم ۸۵ درصد کل عرض مانیتور و در واقع مرورگر بشه!

سیو میکنیم و میریم صفحه ی صایت رو میبینیم.

حالا برای اینکه فرق px دادن و % رو ببینین %۸۵ رو به یک عدد مثل ۷۵۰px تبدیل میکنیم و با عوض کردن عرض مرورگر تفاوت رو میبینیم:

زمانی که از px استفاده میکنیم با تغییر اندازه و همچنین تغییر رزولوشن ممکنه قسمتی از مطالب نمایش داده نشن که زیاد جالب نیست!

اما با استفاده از % همیشه همه ی مطالب نمایش داده میشن:

حالا میریم سراغ این مساله که صفحه ی ما الان وسط نیست! یعنی فاصله ی wrapper از سمت چپ و راست برابر نیست، برای اینکار از margin استفاده میکنیم و اون رو روی auto قرار میدیم تا خودش کارشو انجام بده:

#wrapper{

width:85%;

margin:auto;

}

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

نکته دیگه اینکه مثل قبل میتونیم مثلا margin از بالا یعنی فاصله از بالای صفحه رو خودمون تعیین کنیم یا مثلا از راست فاصله رو بیشتر کنیم یا هرچی برای اینکه تک تک این کار رو انجام بدیم از ۴ عدد یا درصد یا auto استفاده میکنیم:

#wrapper{

width:85%;

margin: 10px auto 0 auto;

}

یعنی اینکه از بالا ۱۰px و از راست auto از پایین ۰px و از چپ هم auto فاصله داشته باشه!

به همین راحتی!

حالا میریم وارد wrapper بشیم و هدر و غیره رو بنشونیم سر جاشون!

float یک ویژگی در css است که باعث میشه تگ ما در واقع شناور بشه! مثل آب که جای خودش رو پیدا میکنه و هیچ وقت نمیبینیم که توی یک ظرف آب، ته ظرف خالی باشه و بالای ظرف پر!

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

فعلا هدر رو تنظیم میکنیم:

#header{

float:left;

width: 100%;

}

و بعد به content که نوشته های وبلاگ رو در بر داره میرسیم:

#content{

width:70%;

}

دقت کنید با این کار ما عرض content رو ۷۰ درصد wrapper میکنیم که تگ مادر است، نه ۷۰ درصد کل صفحه!

اما باز هم با سیو کردن و دیدن صفحه میبینیم که سایدبار در زیر content قرار داره و نه در کنارش!

اما ویژگی مورد علاقه ی من کارمون رو درست خواهد کرد:

#content{

width:70%;

float:left;

}

حالا سیو کنید و ببینید با یک کلمه چه کارها که نمیشه کرد!

من اولین بار که این کار رو انجام دادم خیلی ذوق زده شدم و حتی الان هم حس خوبی دارم اینجوری 😀

الان با inspect element میتونید دقیقا مرزها رو ببینید و لذت ببرید!

حالا میریم سراغ sidebar و ۳۰ درصد بقیه رو هم میبخشیم به اون و شناورش هم میکنیم!:

.sidebar{

width:30%;

float:left;

}

اگه قبل از اینکه اینکار رو انجام میدادیم با inspect element میرفتیم روی ساید بار میدیدیم که کل صفحه رو مشخص میکنه یعنی فاجعه! اما الان درست جایی رو که باید،متعلق به sidebar است!

علت این هم که قبل از کلمه ی sidebar به جای # نقطه گذاشتیم اینه که اگه یادتون باشه در index ما به sidebar کلاس (class) دادیم نه ID ! اکی؟

حالا مونده footer که بندازیمش پایین صفحه! برای اینکار اولا باید ۱۰۰ درصد عرض داشته باشیم و اینکه کاری کنیم که در اطرافش هیچ چیزی قرار نگیره!

برای اینکار (یعنی دو طرف رو پاک کردن از هر گونه مزاحم) از clear استفاده میکنیم:

#footer{

clear: both;

width: 100%;

float: left;

}

حالا ذخیره میکنیم و میریم یک سایت شکیل تر و قابل تحمل تر میبینیم!

این یک نمای کلی از سایت ماست. خوشگل شد نه؟:D

شما هم میدونید که برای اینکه این رنگها رو به هر قسمت بدین باید از چه کدهایی استفاده کنید و background رو تغییر بدین، من سریع و به ترتیب این کدها رو میدم:

background:#c6c6c6; /* for header */

background:#828282; /* for content */

background:#a1a1a1; /* for sidebar */

background:#c6c6c6/* for footer */

البته اینها رو میدیم که دقیقا قسمتها مشخص بشن و تسلط بیشتری داشته باشیم، همین.

اگه دقت کنید میبینید که در قسمت content نوشته ها خیلی به مرز ها نزدیکند و یه کمی بده! برای اینکه در داخل یک تگ یک فاصله بدیم وکاری به بیرونش نداشته باشیم (یعنی دقیقا بر عکس margin که با خارج کار داره!) از padding استفاده میکنیم، به content میریم و زیر اون برای اینکه به div های زیر مجموعه ی contentارجاع بدیم کد زیر رو مینویسیم:

#content div{

padding:1%;

}

میدونین چی کار کردیم؟

بریم یک نگاهی به index بندازیم، میبینیم که در content 3 تا تگ div داریم یعنی posttitle و entry و همینطور postmetadata که ما به این سه اشاره کردیم!

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

برای sidebar هم از padding استفاده میکنیم تا یک کمی از بالا فاصله بگیره تا خوشگل تر شه!

.sidebar{

width:30%;

float:left;

background:#a1a1a1;

padding:10px 0 0 0 ;

}

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

چون ما الان داریم یک پوسته یا theme انگلیسی میسازیم باید از چپ قرار بدیمش

من دیگه واقعا خسته شدم!

بقیه باشه برای بعد!

بابای بای بای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۹(زیباسازی!)

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

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

style.css رو که یادتون هست؟!

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

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

این فایل که فرمتش css است وظیفه ی درست کردن ساختار سایت و شکل دادن به اون رو داره.

نیازی به اینکه شما چیزی از css بدونین نیست!

شما بعد از اتمام این سری آموزش تنها چیزی که ۱۰۰ درصد مطمئن هستم یاد خواهید گرفت همین css است.

خوب از امروز من با Dreamweaver به جای Notepad کار میکنم.

این دو برنامه اصلا قابل مقایسه نیستند! برای همین من چیزی در رابطه با تفاوت هاشون نمیگم چون تا صبح باید نوشت! فقط همین و بدونین Notepad سوسکه و Dreamweaver اباما!! یعنی تا این حد…!

خوب style.css رو باز میکنیم و شروع میکنیم به زیبا سازی!!

قبلش اینو بگم که این چیزهایی که اول فایل نوشتیم هیچ گونه ربطی به css ندارن، یعنی هر چیزی میشه بین */ و /* نوشت، داستان، شعر و یا مقاله و هر چی شما دوست دارین!

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

یک نکته ی ناراحت کننده هم در css اینه که معمولا مرورگرهای مختلف هر کدام یک ساز مینوازند!

البته بیشترشون با یک ساز کار میکنند و سبکشون فرق داره اما IE تو حال خودشه و هر غلطی میخواد میکنه، ابله!

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

خلاصه اینکه ما از دو browser برای چک کردن تغییرات سایت استفاده خواهیم کرد که از همه بیشتر طرفدار دارند(هر چند این جانب از یکی با دلیل و از اون یکی بی دلیل متنفرم!)

پس علاوه بر wamp برنامه های IE و FireFox رو باز میکنیم.

(اگه افزونه ی فایر باگ رو دانلود کردین که هیچ، اگه نکردین از google chrome استفاده کنید،البته فعلن مهم نیست!)

در style کدهای زیر رو بنویسید لطفا:

body{
margin:0 0 0 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000;

}

در css اولین چیزی که مینویسیم باید شناسه ای در صفحه ی مربوطه اش باشه!

یعنی body در اینجا اشاره دارد به تمام کدهایی که ما در بین تگ های <body> تا <body/> نوشتیم.

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

} در جلوی اسم قرار میگیره و تا به { نرسه مربوط به همون body (البته در اینجا) است.

حالا توضیحات کدهایی که نوشتیم:

margin یعنی فاصله ای که مرزهای تگ ما از مرزهای تگ مادر خودش داره، در اینجا چون تگ ما body است خودش مادر بزرگه! و margin اون از اطراف صفحه ی مرورگر حساب میشه، یعنی مثلا اگه ما به جای ۰ از ۱۰۰px استفاده کنیم از اطراف ۱۰۰px فاصله میگیره،همین!

اما علت اینکه ۴ تا صفر داریم چیه!؟

اینه که هر کدوم مربوط به یکی از جهات تگ هستند! از چپ به راست به ترتیب : یالا، راست، پایین ، چپ. (یعنی در جهت عقربه های ساعت)

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

مرورگرها (و در واقع سایت ها) فونت ها رو از کامپیوتر بیننده بارگذاری میکنن یعنی اینکه شما این فونتی که الان میبینید رو در کامپیوتر خودتون دارین (نصب شده)

و این تعداد فونت به این علت است که ممکنه مثلا یک کاربر فونت Arial رو توی کامپیوترش نداشته باشه(که بعیدتر از این نمیشه!)اگه اینطور بود فونت بعدی انتخاب میشه و همینطور به ترتیب.

font-size هم که سایز فونت رو تعیین میکنه یعنی بزرگیشو که میتونین تغییرش بدین!

vertical-align هم شرو وره! باعث میشه که مطمئن شیم نوشته ها از بالای صفحه (top) شروع بشن!

background رنگ پس زمینه ی صفحه ی سایت رو تعیین میکنه و ffffff# کد مربوط به رنگ سفید است که اگه DW داشته باشین با نوشتن # لیست رنگها را خواهید داشت.

color مربوط به نوشته هاست که رنگشون رو معین میکنه ۰۰۰۰۰۰# هم کد رنگ سیاه است!

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

یک توضیح در مورد کدهای رنگ که با # شروع میشن اینکه Hexadecimal Codes اسمیه که بهشون دادن

و با یک سرچ میتونین یک سایت خوب در این زمینه پیدا کنید،هرچند با برنامه های مختلفی مثل Photoshop و همین DreamWeaver میشه کد مربوط به هر رنگ رو پیدا کرد.

شاید جالب باشه براتون که بدونید ۲ عدد اول مربوط به رنگ قرمز، ۲ عدد وسط مربوط به سبز، و ۲ عدد آخر مربوط به رنگ آبی هستند. یعنی مثلا F00 که F در اون یعنی ۱۰ رنگ قرمز رو ۱۰ و آبی و سبز رو ۰ میره در نتیجه رنگ ما قرمز خواهد شد! و ۰ّF0 سبز خواهد بود و همچنین ۰۰F آبی.

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

خوب در مورد لینک ها هم یک صحبتی بکنم، اگه یادتون باشه برای اینکه لینکی درست کنیم باید نوشته ی مربوطه رو در تگ a قرار میدادیم، پس تگ مربوطه در css ما a است، اما ما میخواهیم لینکهامون رو مثلا کاری کنیم که زیرشون یک خط کشیده بشه مثل این نوشته!

خوب برای اینکار باید بعد از مشخص کردن تگ (یعنی a) اون رو به صورت زیر به لینکها مربوط کنیم:

a:link{

}

و بعد از کد text-decoration استفاده میکنیم و اون رو برابر با underline قرار میدیم:

a:link{
text-decoration:underline;
}

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

ما میتونیم لینکهایی که کاربر روی اونها کلیک کرده هم به همین صورت در بیاریم، برای شناساندن این لینکها باید از a:visited استفاده کنیم، برای اینکه یک رفتار رو با دو یا چند تگ مختلف داشته باشیم از , استفاده میکنیم:

a:link, a:visited{
text-decoration:underline;
}

اینطوری هم لینکهایی که کاربر دیده و هم اونهایی که ندیده underline نمایش داده میشن، ما میتونیم لینکهامون رو به هر رنگی که دوست داریم نمایش بدیم(با استفاده از color ) و اگر اینکار رو نکنیم هر مرورگر بر اساس تنظیمات خودش لینکها رو مشخص میکند(که در مرورگرهای معروف این رنگ آبیست!)

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

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

a:hover{

text-decoration

}

hover برای زمانی استفاده میشه موس روی یک تگ مشخص (در اینجا a) قرار میگیره، من میتونم با استفاده از دادن blink به text-decoration لینک رو چشمک زن کنم یا با line-through یک خط وسط لینک بکشم و یا با overline یک خط بالاش بکشم و یا همون چیزی که داره (یعنی underline ) رو با استفاده از none بردارم!:

a:hover{

text-decoration:none;

}

من تا حالا کاری کردم که لینکهامون آبی بوده و underline داشته باشن و وقتی کاربر روی لینک میره اون خط زیرین برداشته بشه.(البته معمولا برعکس این اتفاق میافته :D)

حالا میتونیم رنگش هم مشخص کنیم، مثلا قرمز!:

a:hover{

text-decoration:none;

color:#F00;

}

این هم یک تصویر از انواع حالات لینکها

بس است دیگر

خسته شدم!

بای!

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۸(معتبرسازی)

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

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

امروز کار خاصی نداریم (مثل چند روز اخیر!!) اما از جلسه ی بعدی مهمترین کارمون شروع میشه!

تا حالا سایتمون مثل بقیه که نیست خیلی هم مذخرف (یا مزخرف،مظخرف،مضخرف و…) است!

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

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

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

دیدن تک تک خط ها کار ابلهانه ایست!

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

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

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

internet explorer یا همون IE رو باز میکنیم و به localhost میریم و بعد wordpress

روی صفحه ی سایت کلیک راست کرده و view source رو انتخاب میکنیم.

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

کلید Ctrl رو نگه میداریم و A رو فشار میدیم تا کل کد به حالت انتخاب در بیاد و بعد کپی میکنیم همه رو!

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

http://validator.w3.org/

بعد کدی که کپی کردین رو در قسمتی که مشخص شده (Validate by direct input)  با Ctrl و v یا کلیک راست paste میکنید.

به همین راحتی یا سبز میشوید یا قرمز!!

من قرمز شدم!

یعنی کدم اشکال داشته اما این همه کد رو چطور چک کنم!؟

خود validator این کار رو انجام میده کمی میریم پایین تر تا اشکالات رو ببینیم.

مشکل من اینطور بیان شده:

line 159   ID  “search” already definded

خوب میریم به amoozesh تا ببینیم مشکل از کجاست!

در index.php که یک شناسه با نام search بیشتر نداریم.

پس میریم سراغ searchform.php تا ببینیم چه خبره!

اینجا هم یک id با عنوان search داریم و میدونیم بعد از لود شدن صفحه ی سایت searchform هم داخل index قرار میگیره و این یعنی یک صفحه و دو id با یک نام!

همچین چیزی کاملا غلط است!

پس میریم و در searchform.php آن div ای که شناسه اش search است پاک میکنیم تا از شرش خلاص شیم!

اما قانون یادتون نره!

باید <div/> مربوط به اون هم پاک کنیم که همون دومی از پایین است!(هرچند اولی با دومی در اینجا فرقی ندارد!:d )

خوب حالا دوباره میریم سراغ validator تا ببینیم سبز میشیم یا نه!

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

شما هم اگه مشکل دیگه ای دارین حلش کنین و یا اگه حل نشد اینجا در میون بزارین تا حلش کنیم!

پیشنهاد اول: برنامه ی Adobe Dreamweaver نسخه ی آخرش رو تهیه کنید.

پیشنهاد دوم: اگه نتونستین پیشنهاد اول رو انجام بدین Microsoft Expression Web رو تهیه کنید!

پیشنهاد سوم:اگه هیچ کدوم رو گیر نیاوردین (که خیلی اشتباه کردین!) برین و ++notepad رو دانلود کنید که حتما این یکی گیر میاد، از گوگل بپرسید!!

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

ولی دومی و سومی هم کارمون رو راه میندازن!

هرچند میتونید همچنان با notepad کارها رو انجام بدین، اما با درد!

بابای پس…

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۷(فوتر)

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

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

امروز میریم سراغ فوتر (footer) آخرین جایی که معمولن بازدید کننده ها میبینین!

میتونیم اطلاعاتی مانند طراح قالب،کپی رایت (که در ایران به دلایلی که اکثرن نمیدونیم وجود نداره!) و … رو قرار بدیم.

میتونین آخر این وبلاگ رو ببینین تا بفهمین ” و …” یعنی چی!

یک div مثل همیشه میسازیم با id یا شناسه ی footer میدونیم که باید بعد از اتمام ساید بار این کد رو قرار بدیم، یا آسونتر اینکه از پایین کد شروع کنیم یعنی از پایین به بالا بیاییم و بالاتر از <body/> تگ div خودمون رو باز کنیم و ببندیم:

<div id=”footer”>

</div>

برای نوشتن مثلا یک کپی رایت با نام وبلاگ میتونیم از کد زیر استفاده کنیم:(نکته اینکه قرار نیست شما دقیقن کاری رو که من انجام میدم انجام بدین! دیگه الان موقع شه که دستهاتون رو کثیف کنین! اگه یادتون باشه کدهای مخفی html رو برای دانلود گذاشته بودم، میتونین با استفاده از اون کد کپی رایت یعنی این علامت © رو پیدا کنید)

<p>
Copyright &#169; 2009 <?php bloginfo (’name’) ; ?>
</p>

باید کاملا بدونین چه کردیم!

p برای یک یند (پاراگراف) و اون کد عجیب غریب برای این: ©

یک تابع php هم استفاده کردیم که در هدر هم استفاده کرده بودیم!

اگه بخواهیم میتونیم اسم وبلاگ رو هم به لینک تبدیل کنیم! که خودتون بلدین!:

<p>
Copyright &#169; 2009 <a href=”<?php bloginfo(‘url’) ?>”><?php bloginfo(’name’); ?></a>
</p>

میتونیم در آخر مثلا بنویسیم که طراح قالب کی بوده!:

<p>
Copyright &#169; 2009 <a href=”<?php bloginfo(‘url’) ?>”><?php bloginfo(’name’); ?></a> and designed by Tenet.ir Tutorial Series
</p>

از این جور کارها دیگه!

مثلا میتونیم به جای نوشتن ۲۰۰۹ کد زیر رو به کار ببریم تا همیشه up تو date باشه!

<?php echo date (‘ Y ‘) ; ?>

این درس هم مثل قبلی ازاین آسونتر نمیشد!

مواظب…

بای