دسته‌ها
برجسته جی کوئری وردپرس

ساخت اسلاید شو برای وردپرس

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

برای ساخت اسلایدشو از جی کوئری استفاده خواهیم کرد و همین طور از پلاگین jQuery Cycle Plugin که یکی از کاربردی ترین پلاگین های جی کوئری هست…

برای اینکه ما از جی کوئری و پلاگین jQuery Cycle در قالب استفاده کنیم باید کارهای زیر رو انجام بدیم:

جی کوئری رو از لینک زیر دانلود کنیم:

http://docs.jquery.com/Downloading_jQuery

پیشنهاد من اینه که نسخه Minified رو دانلود کنید که یک min. قبل از js. داره و حجم کمتری نسبت به نسخه اصلی داره

و پلاگین Cycle رو هم  از لینک زیر دریافت کنید:

http://malsup.com/jquery/cycle/download.html

دو فایل جاوا اسکریپتی که دانلود کردیم رو داخل پوشه ی قالب مورد نظرمون ذخیره میکنیم . (میتونیم فایلها رو در فولدری با نام اختیاری در پوشه ی قالب ذخیره کنیم )

بعد نوبت میرسه به لود کردن این دو فایل در قالب، فایل header.php رو باز میکنیم و کدهای زیر رو در اون مینویسیم:

<script src="<?php bloginfo('template_directory'); ?>/jquery.min.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/jquery.cycle.all.min.js "></script>

نکته ۱: این کدها باید جایی بالاتر از تگ <head> قرار بگیرن.

نکته ۲: اگر فایلهای جاوااسکریپت رو در فولدری در زیر مجموعه ی فولدر قالب ذخیره کردین توجه داشته باشین که آدرس درستی به فایلها بدین، برای مثال اگر فایلها رو در فولدر js ذخیره کردین آدرس فایل جی کوئری ما به صورت زیر خواهد بود:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

خب تا اینجای کار رو که اکثر دوستانی که با تم ها سر و کار دارن حتمن بلد بودن و اگر هم نبودن انقدر ها سخت نبود که نفهمن، هرچند بقیه ی پست هم آنچنان پیچیده نخواهد بود 🙂

حالا فایل متنی زیر رو دانلود کنید و با فرمت php در فولدر قالب ذخیره کنید، یعنی فایلی با نام slideshow.php در فولدر قالب مورد نظر خواهیم داشت.

wp_slideshow (1429 دانلود ها)

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

<?php include(TEMPLATEPATH.'/slideshow.php')?>

کد بالا وارد فولدر قالب شده و slideshow.php رو در قسمتی که کد نوشته شده ایمپورت یا همان include  میکند.

نکته: نه تنها بهتره که الزامی هم هست که کد بالا رو داخل یک تگ با یک کلاس یا آی دی مشخص قرار بدین تا بتونین بهتر استایلش کنین، هرچند  میتونین از آی دی slideshow هم برای استایل قسمت مورد نظرتون استفاده کنید.

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

برای اینکار در جایی بالاتر از تگ هدر، که معمولن در فایل header.php قرار داره کد زیر رو وارد میکنیم:

 

<script>

jQuery(document).ready(function(){
jQuery(‘#slideshow’).cycle({

fx: ‘fade’,

timeout:4000
});
});

</script>

 

 

ما  در اینجا تگی با آی دی slideshow رو هدف قرار دادیم و افکت مورد نظرمون هم fade هست و روی هر عکس ۴ ثانیه صبر میکنه(میتونین در اینجا افکتهای مختلف این پلاگین رو ببینین و در کد خودتون اعمال کنید)  تمام آپشن های پلاگین هم در این صفحه قرار دارن، برای استفاده از هرکدام هم باید با یک , جداشون کنین.

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

تصاویر بندانگشتی در وردپرس

سلام

از وردپرس ۲٫۹ یک امکان خیلی خوب به وردپرس اضافه شد و اون امکان اضافه کردن تصاویر بندانگشتی (یا همون thumbnail) به پست ها بود که از خیلی وقت پیش کلی راه کار و پلاگین براش ارائه شده بود و خب نیازش واقعن حس میشد.

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

۱- افزودن امکان نمایش thumbnail به قالب وبلاگ

اولین کاری که باید بکنیم (و امکانش از ورژن ۲٫۹ به وردپرس اضافه شده) اینه که به وردپرس بفهمونیم قالب ما از تصاویر بندانگشتی پشتیبانی میکنه و یه سری تنظیمات لازم که بسته به کارمون میتونه متفاوت باشه رو انجام بدیم

در functions.php  موجود در فولدر تم مربوطه میریم و کد زیر رو وارد میکنیم:

<?php
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
}
?>

خط اول یک شرط میکنه که اگر تابع add_theme_support که از ورژن ۲٫۹ اضافه شده وجود داشت (یعنی وردپرس ما به روز بوده و کمتر از ۲٫۹ نیست) از تابع استفاده کنه و به وردپرس بفهمونه که قالب از امکان نمایش thumbnail بهره میبره.

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

<?php add_theme_support('post-thumbnails'); ?>

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

حالا با قرار دادن کد زیر در هرجای قالب ( به طور مثال فایلهای single.php  یا index.php یا هرجای دیگه که حلقه ی مطالب قرار دارد) میتونیم تصویر مربوط به هر پست رو نمایش بدیم.

<?php the_post_thumbnail(); ?>

توجه کنید که این کد رو باید داخل حلقه ی پست ها قرار بدین ( حلقه چیست؟ )، اگه چیز زیادی از حلقه نمیدونین کد

<?php the_content(); ?>

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

این تابع هم مانند دیگر توابع آرگومان هایی داره که بررسی میکنیم،

Medium : این آرگومان حجم کمتری از تصویر رو در وبلاگ قرار میده که میتونه به سرعت لود صفحه کمک کنه.

the_post_thumbnail('medium');

Large : این آرگومان هم بالاترین کیفیت موجود رو استفاده میکنه.

the_post_thumbnail('large');

و در آخر برای تنظیم سایز تصاویر از حالت زیر میتونیم استفاده کنیم:

the_post_thumbnail( array(100,100) );

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

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

در درس بعدی که امیدوارم زیاد نوشتنش زمان نبره و تنبلی نکنم تو انتشارش یاد میگیریم که چطوری این تصاویر رو به صورت اسلاید در قسمت مورد نظرمون در وبلاگ قرار بدیم

موفق و خوشحال باشین

بای

دسته‌ها
معرفی وردپرس

دو افزونه ی مفید برای DreamWeaver

بر اساس wakoopa که یک سایت منحصر به فرد در زمینه آمار نرم افزار های استفاده شده توسط کاربران سراسر دنیاست افرادی که از Dreamweaver محصول کمپانی عظیم Adobeاستفاده میکنند بسیار زیاد و تقریبن پر استفاده ترین نرم افزار برای طراحان وب همین Dreamweaver هست.البته اگه در ایران copyright بود و ما مجبور بودیم حدود ۴۰۰ هزار تومان برای خریدن این برنامه بپردازیم! قطعن طراحان ترجیح میدادن از notepad برای کارهاشون استفاده کنن!!

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

برای اینکار دو extension یا بسته ی الحاقی برای Dreamweaver برای شما معرفی میکنم که خیلی به شما برای طراحی و کد نویسی کمک خواهد کرد.

اولی ThemeDreamer for wordpress ساخته ی Virtusoft است که یک منو به منوهای insert در DW اضافه میکنه که تقریبن تمام نیازهای شما برای کدها رو برآورده میکنه، میتونید این extension رو از لینک زیر دریافت کنید.

theme dreamer wordpress (1236 دانلود ها)

extension بعدی tagstention است که به ما کمک بیشتری میکنه، حتما دیده اید وقتی دارین مثلا در css کد نویسی میکنید وقتی حرف b رو مینویسید یک صفحه باز میشه که لیست کدهایی که با b شروع میشن رو به صورت اتوماتیک نمایش میده اما برای وردپرس چطور؟ چه چیز بهتر از اینکه وقتی مینویسیم blo یک لیست باز شه که کد های وردپرس که با blo شروع میشن رو نمایش بده؟! مثلا bloginfo !! و حتی وقتی روی bloginfo کلیک میکنیم آرگومان های اون رو هم نمایش بده!

Tagstention (1069 دانلود ها)

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

بنابراین اگر شما هم سری آموزشهای طراحی سایت بر پایه وردپرس رو دنبال کرده اید و حالا دیگه حوصله ی کار با notepad یا نوشتن کدها رو ندارین لازم نیست با خونریزی سایت طراحی کنید و همین الان این دو extension رو روی Dreamweaver چهارصد دلاری خودتون (که احتمالن مثل من واسه اش ۱۰۰۰ تومان هم ندادین) نصب کنید و از طراحی لذت بیشتری ببرید.

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

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

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

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

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

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

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

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

و آخرین نکته ای که به ذهنم رسیده و میرسه اینه که بتونید از __ برای ترجمه ی قسمتهایی از توابع 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 (2295 دانلود ها)

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

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

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

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

در ضمن این 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 (992 دانلود ها)

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

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

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

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

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

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 انگلیسی میسازیم باید از چپ قرار بدیمش

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

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

بابای بای بای