دانلود از ۴shared

نکته: در صورتی که قادر به خواندن نوشته های این فایل نیستید، فونت B Yekan را دانلود کرده و به پوشه ی Fonts ویندوز خود بریزید.

مطالب مرتبط

• چگونه افزونه (پلاگین) های وردپرس را فارسی کنیم؟
• آموزش تصویری نصب وردپرس بروی هاست

Write a quick comment | مشاهده‌ 53 نظر دیگر

خوب باید این خبر خوش را به شما بگویم، که بعد از مدتها این سری آموزشی به اتمام رسید. اولین پست این سری آموزشی در تاریخ ۰۳/۱۰/۱۳۸۷ نوشته شد و امروز یعنی در تاریخ  ۲۶/۶/۱۳۸۸ این سری آموزشی به پایان می رسد، یعنی نزدیک به ۷ ماه این سری آموزشی که شامل ۲۱ جلسه بود، ادامه پیدا کرد. دوستان زیادی به من گفتند که این سری آموزشی را سریعتر ادامه بدهم، و باید الان به اینان گفت که این سری در نهایت به پایان رسید. با وجود تمام سختی ها و مشکلات، باید بگویم که خوشحالم که توانستم خدمتی هر چند کوچک به وردپرس کرده باشم…

شما تقریباً همه چیز را می دانید. و برای کامل کردن اطلاعات وردپرسی خود این سری آموزشی را نیز ادامه دهید. امروز شما نحوه ی زندگی بخشی به تمام وبلاگ ها را یعنی نحوه ی قرار دادن بخش نظرات را خواهید آموخت. در تصورات من، وبلاگی که در آن خواننده هایش مجاز نباشند که نظر بدهند، وبلاگ نیست. البته برای برخی، بخش نظرات آنچنان مهم نیست ولی برای من واقعاً تصور نبود نظرات هم سخت است.

برای خواندن بقیه ی درس ادامه مطلب را مطالعه کنید….

در ابتدا باید بگویم که روش ساختن بخش نظرات به دوشکل ممکن است، یک- حالت پیش فرض وردپرس، که با تایپ فقط یک خط کد امکانش میسر می شود. دو- روشی که ما نظرات را با نظر و سلیقه ی خود، درون فایلی بنام comments.php می نویسیم تا سبک نمایش را خودمان تعیین کنیم. که در این درس ما روش دوم را به شما می آموزیم.

البته شما باید بدانید:
» روش دوم یعنی تنظیم کردن قالب در فایل commnets.php راه آنچنان استانداردی نیست و بهتر است که از پیش فرض وردپرس استفاده شود.
» بیشتر طراحان وردپرس از الگو پیش فرض نظرات وردپرس استفاده می کنند.
» بعضی از طراحان از الگوی پیش فرض وردپرس صرف نظر می کنند چون حتماً آن نیازشان را براورده نمی کند.
» شما از ورژن اصلاح شده ی الگو پیش فرض نظرات من استفاده می کنید.

• مرحله ی اول:

» یک فایل جدید بنام comments.php بسازید
» کدهای داخل فایل comments.txt را به درون فایل comments.php کپی کنید.
» کدهای داخل فایل comments.php را save کنید.

• مرحله ی دوم:

» کدهای درون فایل comments-template-css را کپی کنید.
» این کدها را در پایین یا در زیر سلکتور #footer بچسبانید.

• مرحله ی سوم:

در فایل single.php، در زیر تگ باکس مخفی ای که مشخصه ی id آن entry است، کدهای زیر را تایپ کنید:

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

تابع comments_template() بخش نظرات وبلاگ را صدا می زند. البته بخش جالب این تابع این است که اگر فایلی بنام comment.php وجود داشته باشد، الگوی نمایش بخش نظرات پوسته از این فایل گرفته می شود و اگر چنین فایلی وجود نداشته باشد، این تابع نحوه ی نمایش بخش نظرات را از بخش پیش فرض وردپرس می گیرد که البته امکانات آن ممکن است راضی کننده نباشد.

شما همچنین می توانید از تابع  comments_template() در فایل page.php استفاده کنید، تا به بینندگان اجازه دهید تا امکان نظر دهی برای برگه های قالب شما نیز میسر باشد. اگر مایلید که اینکار را انجام دهید، دقیقاً همین مراحل را برای فایل page.php انجام دهید.

• مرحله ی چهارم:

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

» به آدرس View > Page Source یا Source بروید.
» تمامی این کدها را کپی کنید.
» به سایت validator بروید.
» تمامی این کدها را در بخش Direct Input بچسبانید و یا paste کنید.
» بروی دکمه ی check کلیک کنید.

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

• Home page
• Archive pages
• Category pages
• Search result pages
• Pages (مثل: About)
• Single post با page
• Single post بدون بخش نظرات
• Single post با بخش نظرات
• Single post با پیغام باید برای نظر دادن حتماً وارد شوید
• Single post بدون محدودیتی برای نظر دادن
• Password protected single post با comments

◊ توضیحات بیشتر برای الگوی نظرات:

» الگوی نظرات اساساً یک لیستی با تگ ol می باشد. اگر چه این تگ با سایر تگهای این سبکی فرقی ندارد (مانند تگهای li) اما یک تفاوت کوچک دارد. تگ غیر ol هر آیتم را با یک نقطه از دیگری متمایز می کنند ولی تگ ol هر آیتم را با شماره از دیگری متمایز می کند. (اگر متوجه نشده اید، ناراحت نباشید، این خط در حقیقت تنها برای دادن اطلاعات بیشتر بود و در امتحان پایان ترم نمی آید.)
» در فایل single.php، شما تگ div با نام مشخصه ی آی دی comments-template بدور تابع comments_template() قرار داده اید. در حقیقت تگهای ol توسط تگ div محصور شده اند.
» وقتی شما مطلبی را با پسورد منتشر می کنید، بخش نظرات شما نیز همچنین بوسیله ی پسورد محافظت می شوند.

این کدهای عکس زیر هستند که لیست نظرات را می سازند:

و این آنچه که واقعاً منظور ماست در عکس زیر مشهود است:

تابع comment_text() محتوای نظر هر شخص را صدا می زند. مثلاً اگر من نظر داده باشم، که چطوری رفیق خیلی مطلبت باحال بود داداش… این نوشته دقیقاً توسط تابعی که گفته شد نمایش داده می شود.

من شرح کدها درون فایل Style را به خود شما واگذار می کنم . بر خلاف کدهای درون فایل comments.php شما واقعاً می توانید با کدهای CSS بدون ایجاد ایرادی بازی کنید تا به آنچه که نیاز دارید برسید.

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

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

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

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

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه پوسته های وردپرس را فارسی کنیم؟
• قالب شایان برای وردپرس
• پوسته رادیان ورژن 2 برای وردپرس
• قالب ماهان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)

Write a quick comment | مشاهده‌ 57 نظر دیگر

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

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

برای شروع کار Xampp, Firefox, index.php, style.css را باز کنید.

• مرحله اول:

۱۰ پیکسل فاصله (padding) از بالا به باکس مخفی footer بدهید. بعد از این همه درس باید اینکار را خودتان بتوانید انجام دهید. بنابراین کد را به شما نمی دهم، خود شما باید اینکار ساده را انجام دهید.

• مرحله دوم:

به تمام تگهای P داخل باکس مخفی footer یک ارتفاع خط (line-height) هجده پیکسلی بدهید. به شما یک کمک می کنم، سلکتور مورد نظر برای تگهای پاراگراف درون div فوتر #footer p{} می باشد. (شما امروز خودتان باید این ارتفاع خط را به این سلکتور بدهید.)

• مرحله سوم:

» یک فایل جدید بنام header.php بسازید. مطمئن شوید که نوع یا پسوند فایل php باشد نه یک فایل Document معمولی.

» درون فایل index.php ، از تگ پایانی باکس مخفی header شروع کنید به انتخاب کردن و تا هر آنچه که در بالای آن قرار دارد را select کنید. بعد از انتخاب کردن تمامی خطوط، آنها را cut کرده و درون فایل header.php بچسبانید یا همان paste کنید.

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

• مرحله چهارم:

شما باید به فایل Index.php بفهمانید که از این به بعد باید کدهای قبلی (کدهای مربوط به هدر) را از داخل فایل header.php بخواند. برای اینکار خط زیر را در ابتدای فایل index.php در عوض کدهای قبلی بنویسید:

<?php get_header(); ?>

کد بالا یک تابع داخل سیستم وردپرس است که به طور ویژه کدهای داخل فایل header.php را درون فایل index.php می خواند. در حقیقت کد بالا کد طولانی <?php include (TEMPLATEPATH . ‘/header.php’); ?> را برای شما خلاصه می کند.

تغییرات را save کرده و مرورگر خود را refresh کنید. شما نباید هیچ تغییری را مشاهده کنید. اگر پوسته ی شما شکسته به نظر برسد یا ایرادی داشته باشد در هنگام انتقال کدها حتماً شما اشتباهی انجام داده اید.

• مرحله ی پنجم:

» مرحله ی پنجم نیز تقریباً مانند مراحل قبل است، منتها اینبار برای فایل sidebar.php انجام خواهیم داد.
» از شروع باکس مخفی sidebar تا پایان آن باکس، کدها را انتخاب، cut و درون فایل sidebar.php بچسبانید.
» سپس، در داخل فایل index.php بجای کدهای برداشته شده کد <?php get_sidebar(); ?> را تایپ کنید.
» تغییرات را save کرده و مرورگرتان را refresh کنید. دوباره شما نباید تغییری را مشاهده کنید.
» الان فایل sidebar.php من را می توانید برای فهم بیشتر دانلود کنید.

• مرحله ی ششم:

» همین مراحل بالا را برای فایل footer.php نیز انجام دهید.
» در داخل فایل index.php بجای کدهای برداشته شده کد <?php get_footer(); ?> را تایپ کنید.
» فایل footer.php من را می توانید برای فهم بیشتر دانلود کنید.

◊ بررسی کردن مراحل:

» شما ۳ فایل جدید با نام های header.php و sidebar.php و footer.php بوجود آوردید.
» شما با ۳ تابع جدید آشنا شدید. تابع های get_header() و get_sidebar() و get_footer().
» شما در پایان این درس می توانید به فایلهای من نگاهی بیاندازید:  index, style, header, sidebar, footer . تا اگر به ایرادی برخوردید از آنها کمک بگیرید.

درس امروز کوتاه بود، چیزی به پایان دروس نمانده است… صبور باشید…….

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 5)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 15)

Write a quick comment | مشاهده‌ 13 نظر دیگر

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

برای شروع درس و اینکه چگونه سایدبار را صفحه آرایی کنیم به ادامه مطلب بروید…

مثل همیشه شما بایستی index.php ، فایل style.css، مرورگر فایرفاکس، فولدر پوسته ی مورد نظر و در آخر تنظیمات برنامه ی Xampp را باز کنید.

• مرحله ی اول :

کدهای زیر را در پایین .sidebar{} تایپ کنید

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

حال شما با این کد ها تگ های ul ای که درون سایدبار هستند را صفحه آرایی کرده اید و به آنها ویژگی بخشیده اید. تمامی تگ های ul و همچنین ul های تو در تو، ویژگی های مورد نظر را به ارث خواهند برد.

برای مثال :

همانگونه که مشاهده می کنید، ul های دوم که با رنگ آبی مشخص شده اند با وجود اینکه در زیر مجموعه ی ul اصلی قرار دارند، باز هم ویژگی های ul اول را به ارث می برند. برای مثال اگر شما حاشیه ای را برای ul اول بدهید، همین حاشیه برای ul دوم نیز داده خواهد شد.

تغییرات را ثبت کرده و مرورگرتان را refresh کنید تا تغییرات را مشاهده کنید.

توجه کنید که چطور ۱۰ پیکسل padding به بالا و پایین سایدبار شما اضافه شده است. (عکس زیر)

• مرحله ی دوم :

کدهای زیر را پایین کدهای .sidebar ul{} تایپ کنید.

.sidebar ul li{
padding: 10px 0 10px 0;
}

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

◊ چرا این ۱۰ پیکسل فاصله را به تگ ul در مکان اول اضافه نکردیم؟
دلیل اینکار این بود که ما می خواهیم که بین اجزا یا ابزارک های داخل سایدبار فاصله ایجاد کنیم، برای مثال می خواهیم بین فرم جستجو و تقویم فاصله ای وجود داشته باشد یا بین تقویم و برگه ها فاصله ی مشخصی وجود داشته باشد. که در این صورت بایستی به تگ li درون ul سایدبار ویژگی بخشید. حال شما با فاصله ای (padding) که به سایدبار داده اید بین اجزای داخل سایدبار فاصله ای ۱۰ پیکسلی ایجاد کرده اید.

• مرحله ی سوم :

خط های زیر را در پایین کد های .sidebar ul li{} تایپ کنید:

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

بیاد بیاورید که چگونه sub-heading های زیر مجموعه ی post{} را صفحه آرایی کردیم. در حقیقت شما با سلکتور ul li h2 عنوان اصلی هر ابزارک را صفحه بندی می کنید.

حالا شما می توانید ویژگی های داده شده به عنوان هر ابزارک را مشاهده کنید.

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

◊ دلیل این فاصله بین هر کدام از برگه ها چیست؟
چون شما به .sidebar ul li{} مقداری padding داده اید. بنابراین li های سطوح زیر دست نیز بر اساس قانون وراثت از این فاصله (padding) ویژگی به ارث می برند. برای حل این مشکل مرحله ی چهارم را بخوانید.

• مرحله ی چهارم :

کد زیر را زیر کدهای بخش .sidebar ul li h2{} تایپ کنید:

.sidebar ul ul li{
padding: 0;
}

با سلکتور .sidebar ul ul li{} و مقدار فاصله ی (padding) صفر، li های زیر دست ویژگی فاصله ی ۱۰ پیسکلی را از دست داده و به همان حالت اول باز می گردند.

نتیجه این هست:

کد line-height: 24px را نیز به .sidebar ul ul li{} اضافه کنید:

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

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}

باید کد شما شبیه به این شده باشد:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}

• مرحله ی پنجم (مرحله ی اختیاری) :

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

برای صفحه آرایی تقویم باید ابتدا تگ مربوط به آن، مکان قرار گیری آن و نام id آن را پیدا کرد. برای انجام اینکار در مرورگر فایرفاکس به تب View رفته و سپس Page Source را انتخاب می کنیم. کدهای مروبط به سایدبار در بخش پایین کدهای سورس هستند، بنابراین اسکرول را به پایین کشیده تا به کدهای زیر برسید:

حالا شما می دانید که تقویم در تگ Table با مشخصه ی id که مقدار آن wp-calendar است، قرار دارد.

◊ اما سوال این است که چطور wp-calendar را داخل فایل style.css هدف گیری کنیم؟

جواب table#wp-calendar{} هست. اما چرا؟
قبلاً به شما نحوه ی هدف گیری باکس مخفی (div) که با مشخصه ی id نام گذاری شده بود را آموزش داده بودیم (باید یک علامت # را در ابتدای نام آن قرار می دادیم). در این مورد شما فقط بجای div یک table دارید با مشخصه ی id پس بصورت table#wp-calendar آنرا هدفگیری می کنیم.

چون #wp-calendar{} منحصر به فرد است بنابراین این سلکتور برای سایر تگها استفاده نخواهد شد. اما اگر شما می خواهید که این مقدار را باز هم منحصر به فرد تر کنید می توانید از سلکتور .sidebar ul li table#wp-calendar{} استفاده کنید.

اما سوال اصلی اینجاست که چگونه این کشش را ایجاد کنیم تا تمامی فضای سایدبار پر شود. برای اینکار از کد width: 100% کمک می گیریم. به همین سادگی….

پس کدهای زیر را در پایین کدهای .sidebar ul ul li{} تایپ کنید:

table#wp-calendar{
width: 100%;
}

تغییرات را ثبت و مشاهده کنید…

» width: 100%;- این کد در مورد پهنای بخش های مختلف مورد استفاده قرار گرفته می شود و در اینجا شما مقدار آن را ۱۰۰% گذاشته اید که در این صورت تمامی فضای سایدبار توسط این مقدار پر خواهد شد. البته بجای ۱۰۰% شما می توانید به آن پیکسل نیز بدهید مثلاً ۲۰۰ پیکسل.

فکر کنم که از حالت قبلی بهتر به نظر برسد. ظاهر سایدبار را کمی بهتر کرده ایم ولی هنوز کمی کار دارد که در جلسات آینده به آن خواهیم پرداخت….

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 13)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 12)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 15)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 14)
• قالب ماهان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 11)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)

Write a quick comment | مشاهده‌ 3 نظر دیگر

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

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

در این درس شما به فایل index.php نیازی ندارید.
موارد Xampp Control, فولدر پوسته, Firefox, و style.css را باز کنید.

• مرحله ی اول:

فایل style.css را باز کنید و در بالای کد body{} کد های زیر را وارد کنید:

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

• توجه کنید که عبارت margin: 0; دقیقاً همان عبارت margin: 0 0 0 0; است. در حقیقت وقتی که تمامی مقادیر یکسان باشند، شما می توانید برای خلاصه نویسی از یک شماره استفاده کنید که این یک شماره برای تمامی حالت ها استفاده می شود. همین کار را برای padding هم استفاده کردیم.
• فایل را save کرده و تغییرات را در مرورگر مورد نظر نگاه کنید.

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

• مرحله ی دوم :

حال زمان آن رسیده که عنوان پست ها (H1) را استایل دهیم، پس کدهای زیر را در پایین body{} تاپپ کنید:

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

» font-family: Georgia, Sans-serif; - این کد عنوان پست ها را از فونت Arial به Georgia تغییر می دهد. و در صورت نبود فونت Georgia، از فونت Sans serif استفاده می کند.

» font-size: 24px; - این گزینه کاملاً واضح است. توجه کنید، شما اندازه ی فونت را در body{} مقدار ۱۲px تنظیم کردید، در صورتیکه تگ های H1 و H2 از این قانون یا این خط کد پیروی نمی کنند، بلکه تگ های heading از قانون خودشان پیروی می کنند. پس برای کنترل آنها، شما باید آنها را بصورت جداگانه قالب بندی کنید.

» padding: 0 0 10px 0; - این کد به معنی این است که از ناحیه ی پایین H1 ده پیکسل فاصله بیافتد. این فضای ۱۰ پیکسلی را برای فضای بین عنوان وبلاگ ها و توضیحات وبلاگ مورد استفاده قرار خواهد گرفت.

تغییرات را save کنید و آنرا مشاهده کنید.

• مرحله ی سوم:

کد های زیر را در زیر سلکتور #container{} تایپ کنید. (بعد از تغییر در هر بلاک و یا تایپ هر کد تغییرات را ثبت کرده و آنها را در مرورگر خود مشاهده کنید.)

.post{
padding: 10px 0 10px 0;
}

(شما با این کد ۱۰ پیکسل فاصله از ناحیه  بالا و پایین به هر div برای هر پست اضافه کرده اید.)

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

(سلکتور post h2 به طور ویژه sub-headings های H2 را فقط برای پست ها هدف گیری می کند، به زبان خودمان این سلکتور تنها به عنوان پستها ویژگی می بخشد).

.entry{
line-height: 18px;
}

(کد line-height فاصله ی بین خطوط یک مطلب را معین می کند که در اینجا ما برای آن مقدار متوسط  و مناسب ۱۸px را انتخاب کرده ایم. می توانید مقدار آنرا به اعداد مختلف تغییر دهید تا وظیفه ی این خط کد را بهتر متوجه شوید. ولی در پایان مقدار را به همان ۱۸ پیکسل بازگردانید.)

• مرحله چهارم:

کد پاینن را در زیر سلکتورa:hover{} تایپ کنید:

p{
padding: 10px 0 0 0;
}

(سلکتور p با پاراگراف های متن سروکار دارد و با توجه به مقدار padding داده شده، فاصله ی هر پاراگراف از دیگری ۱۰px پیکسل خواهد بود).

• مرحله ی پنچم:

کد زیر را در پایین سلکتور entry{} تایپ کنید:

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

اگر بیاد داشته باشید، تگ باکس مخفی postmetadata را درون تگ های پاراگراف (p) قرار داده اید (اگر بیاد ندارید یک نگاهی به فایل index.php بیاندازید). پس برای استایل دادن به آن می توانید به صورت p.postmetadata آدرس دهی کنید.

برای تگ باکس مخفی postmetadata ، شما یک حاشیه خاکستری با ضخامت یک پیکسل از سمت بالا و یک فاصله ی ۱۰ پیکسلی از طرف بالا را به postmetadata داده اید.
نکته: اگه بیاد داشته باشید بخش postmetadata برای این است که اطلاعات هر پست مانند دسته ی پست، تعداد نظرات پست و… را درون آن جای دهیم.

معنی عبارت border-top حاشیه از بالا (فقط از بالا) است. عبارت border-left معنی حاشیه از سمت چپ (فقط از سمت چپ) و به همین ترتیب برای border-bottom و border-right نیز معنی اش واضح است. برای مثال معنی عبارت border: 1px solid #ccc این است که: از هر چهار طرف حاشیه خاکستری با ضخامت یک پیکسل داده شود.

• مرحله ی ششم:

کدهای زیر را در پایین سلکتور p.postmetadata{} تایپ کنید:

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

در این کد شما برای بخش navigation یا همان قسمت صفحه ی بعدی و صفحه ی قبلی قالب بندی می کنید. در حقیقت شما:

• ۱۰ پیکسل حاشیه از بالا اضافه کردید.
• اندازه ی فونت را به ۱۴px تغییر دادید.
• پهنای فونت را به ضخیم عوض کردید
• ارتفاع خط را به ۱۸ پیکسل افزایش دادید.

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

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 16)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 15)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)

Write a quick comment | مشاهده‌ 18 نظر دیگر

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

در این درس می خواهیم، نحوه ی تنظیم کردن پهنا را برای هر div یا همان باکس مخفی توضیح دهیم و اینکه چگونه آنها را مرتب کنیم. همچنین شما را از ایرادات هنگام ساخت پوسته، آگاه خواهیم کرد.

برای خواندن کامل متن به ادامه مطلب مراجعه کنید…

قبل از شروع رسمی درس اعمال زیر را انجام دهید:

Xampp Control و فولدر پوستها، مرورگر فایرفاکس، فایل index.php و فایل Style.css را باز کنید.

• مرحله ی اول:
اولین چیزی که بایستی انجام دهید، این است که پهنای اصلی پوسته تان را مشخص کنید. ما در این آموزش می خواهیم که از پهنای ۷۵۰ پیکسل برای پوسته مان استفاده کنیم. این را نیز به خاطر داشته باشید که هر ۱۰۰ پیکسلی یک اینج است. یکی از دلایلی که ما از پهنای ۹۰۰ پیکسل استفاده نمی کنیم این است که در صورت استفاده از اندازه ی ۹۰۰ پیکسل، بیننده هایی که دارای رزولوشن ۸۰۰ در ۶۰۰ هستند، هنگام تماشای سایت شما حدود ۱۰۰ پیسکل را به طور مستقیم نمی توانند مشاهده کنند.

◊ حال چگونه پهنای کلی پوسته را به ۷۵۰ پیکسل محدود کنیم؟

برای اینکار باید یه باکس مخفی ایجاد کنیم که تمامی اجزای صفحه، مانند header, container, sidebar و footer را درون خود قرار دهد. خوب پس برای اینکار مراحل زیر را انجام دهید:

- کد <div id=”wrapper”> را بعد از <body> در فایل index.php وارد کنید.
- همچنین کد </div> را قبل از </body> در فایل index.php اضافه کنید.

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

حال کدهای زیر را در فایل Style.css برای استایل دهی تایپ کنید:

#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

در css، بویژه در style.css از علامت # برای آدرس دهی به یک div که با مشخصه ی id نام دهی شده است، استفاده می کنیم. خوب شاید این سوال برایتان پیش بیابید که چگونه به div های دارای مشخصه ی class آدرس بدهیم. جواب این است که اگر شما عبارتی مانند کد <div class=”wrapper”> داشته باشد باید از .wrapper (نقطه wrapper) بجای #wrapper (مربع wrapper) استفاده کنید. ممکن است که متوجه نشده باشید، اصلاً نگران نباشید در ادامه هنگامی که چند مثال را مشاهده کردید، کاملاً موضوع را درک خواهید کرد.

تغیرات داده شده در هر دو فایل را save کرده و مرورگرتان را refresh کنید تا تغییرات را مشاهده کنید.

◊ توضیحات بیشتر:

» margin: 0 auto 0 auto; - معنی این کد این است که به ترتیب، صفر پیکسل حاشیه از بالا ، فاصله ی خودکار از راست، صفر پیکسل حاشیه از پایین و حاشیه ی خودکار از چپ بوجود آید.

» width: 750px; - کاملاً واضح هست و نیازی به توضیح نیست.

» text-align: left; - این خط، تراز نوشته های داخل باکس مخفی را تعیین می کند و نوشته ها را به سمت چپ متمایل می نماید. می توانید بجای کد body{ text-align: left;} از کد text-align: center; استفاده کنید تا فرق این دو را متوجه شوید.

• مرحله ی دوم:
باکس Header را به سمت چپ float و به آن پهنای ۷۵۰ پیکسل دهید.
مانند زیر:

#header{
float: left;
width: 750px;
}

• مرحله ی سوم:
به باکس Container به سمت چپ float و پهنای ۵۰۰ پیکسل دهید.

#container{
float: left;
width: 500px;
}

• مرحله ی چهارم:
باکس Sidebar را به سمت چپ float و پهنای ۲۴۰ پیکسل و رنگ خاکستری دهید. (حدود ۱۰ پیکس بی استفاده می ماند، در ادامه دلیل اینکار را توضیح خواهیم داد.)

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

توجه: ما در اینجا از علامت # برای آدرسی دهی به باکس مخفی ای که اسمش sidebar است، استفاده نکرده ایم. در حالی که از یک نقطه کمک گرفته ایم. دلیلش این است که در باکس مخفی نام sidebar را با مشخصه ی class تعریف کرده ایم نه id. همچنین بیاد بیاورید که #ffffff رنگ سفید است و رنگ background: #eeeeee یک رنگ خیلی خاکستری روشن می باشد. در اینجا ما تنها برای اینکه بین sidebar و container تفاوت ایجاد کنیم، به پس زمینه ی سایدبار رنگ خاکستری روشن داده ایم، چون قرار است در ادامه ۱۰ پیسکل باقی مانده را بعنوان فاصله ی بین این دو باکس استفاده کنید.

• مرحله پنجم:
برای باکس مخفی footer مشخصه های زیر را بدهید:

#footer{
clear: both;
float: left;
width: 750px;
}

◊ چه تفاوتی  بین Header و Footer در استایل نویسی وجود دارد؟

جواب: تنها تفاوت داشتن عبارت clear: both; برای سلکتور footer{} می باشد. کد مورد بحث برای این اضافه می شود تا مطمئن شویم که فوتر قالب به هیچ جزء دیگری از قالب اضافه نمی شود. برای مثلا فوتر به باکس container و یا sidebar نمی چسبد.

تغیرات را ثبت کرده و مرورگرتان را refersh کنید.

• مرحله ی ششم:
حال در این مرحله ۱۰ پیکسل باقی مانده را به سایدبار بعنوان فاصله یا حاشیه نامرئی اضافه می کنیم. برای اینکار از کد margin کمک می گیریم. حالا کد استایل سایدبار ما شبیه زیر است:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

فایل را save کنید و مرورگر را refresh نمایید تا ۱۰ پیکسل اضافه شده به  چپ سایدبار را مشاهده خواهید کرد.

» margin: 0 0 0 10px; - معنی آنها به ترتیب یعنی صفر از بالا، صفر از راست، صفر از پایین، ۱۰ پیکسل از چپ. همچنین وقتی که اندازه ی مورد نظر ما صفر باشد لازم نیست که عبارت px را جلوی آن بنویسیم.

• مرحله ی هفتم (مرحله ی اضافی):
در این مرحله می خواهیم که بجای ۱۰ پیسکل فاصله ای که به بخش چپ سایدبار داده ایم، ۲۰پیکسل فاصله قرار دهیم. با انجام اینکار خواهید دید که لایه های شما خواهد شکست و فشار آورده شده به سایدبار باعث می شود که باکس سایدبار در زیر باکس container قرار گیرد. دلیلش این است که ۲۰ پیکسل حاشیه باعث می شود که جمع پهنای Container و Sidebar جمعاً ۷۶۰ پیکسل شود در صورتی که ما باکس wrapper تنها ۷۵۰ پیکسل پهنا داده ایم . البته ممکن است این خطا در فایرفاکس نشان داده نشود و تنها در اینترنت اکسپلورر اینگونه نشان داده شود، چون باگ های فایرفاکس بسیار کمتر از اینترنت اکسپلورر هستند. در هر حال توجه کنید که حتماً اندازه هایی که به اجزای صفحه می دهید متناسب با سایر اجزا باشد.

برای برطرف کردن این باگ، عبارت display: inline; را به سلکتور sidebar اضافه کنید. حال کد ما به این صورت خواهد بود:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

درس امروز به پایان رسید.

و فایلهای نهایی index و style را می توانید دانلود کنید.

امیدوارم که از این درس هم لذت برده باشید، به زودی این دوره ی آموزش نیز به پایان خواهد رسید…

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 17)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 15)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 12)
• قالب ماهان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 11)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)
• چگونه پوسته های وردپرس را فارسی کنیم؟

Write a quick comment | مشاهده‌ 6 نظر دیگر

با نام خدا درس جدید رو شروع می کنیم. درس امروز کوتاه است و چون این روزها کمی سرم شلوغ است، از همین جهت خواهشاً زیاد اعتراض نکنید. قرار شد در این جلسه کدهای Hex را مورد بررسی قرار بدهیم. ما در این جلسه می خواهیم رنگ آمیزی بیشتری را برای اجزای صفحه انجام دهیم. پس چیزهای بیشتری را در مورد کدهای شانزده تایی (Hex Codes) خواهید آموخت .

برای خواندن کامل متن به ادامه مطلب بروید…

این تنظیمات از یک کد شانزده تایی (hexadecimal) که مخفف آن hex است، پیروی می کند. مثلاً برای رنگ نوشته ها کد body { color: #000000;} این معنی را می دهد که تمامی نوشته ها در بدنه ی سایت، به رنگ سیاه در خواهند آمد.

همچنین شما می توانید رنگ پس زمینه ی سایت خود را به رنگ های مختلفی در بیاورید. برای مثال کد body{ background: #ffffff; } به این معنی است که پس زمینه ی صفحه ی شما سفید خواهد بود.

◊ حال توضیح و نحوه ی عملکرد کدهای شانزده تایی (Hexadecimal Codes):

تمامی کدهای Hex شش رقمی هستند، همچنین قبل از این کدها یک علامت # می آید. رنج این کدها از شماره #ffffff که رنگ سفید است تا #۰۰۰۰۰۰ که رنگ سیاه است، ادامه دارد.
#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111, #000000

2 رقم اول کدهای Hex نماینده رنگ قرمز هستند، رقم های سوم و چهارم نماینده رنگ سبز و ۲ رقم آخر نیز نماینده ی رنگ آبی می باشند. پس با این اوصاف کد #ff0000 به شما رنگ قرمز را می دهد، همچنین کد #۵۵۰۰۰۰ رنگ قرمز کدر را به شما خواهد داد. کد #۲۲۰۰۰۰ نیز قابل پیش بینی است که رنگ قرمز کدرتری را به شما می دهد. حال کد #۰۰ff00 رنگ سبز را به شما خواهد داد و در آخر کد #۰۰۰۰ff رنگ آبی را می دهد. پس منظور این کدها را متوجه شده اید و متوجه شده اید که ترکیب این کدها رنگهای مختلفی را خواهد داد.

• مرحله ی اول:

کدهای زیر را در زیر سلکتور body{ } تایپ کنید:

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

◊ این کدها برای چه هستند؟
در ابتدا شما با کد text-decoration: underline; مطمئن می شوید که تمامی لینک های موجود در وب سایت خط زیرین(Underline) خواهند داشت و همچنین چون کد color: #336699; را اضافه کرده اید، تمامی رنگ لینک هایتان به رنگ آبی در خواهد آمد. این رنگ آبی هست چون دو رقم آخر دارنده ی  بالاترین شماره می باشد (دو رقم آخر مربوط به رنگ آبی می شود).

◊ حالا معرفی سلکتور ها:

» a:link - این کد برای استایل یا صفحه آرایی لینکها بکار می رود. وقتی شما می خواهید یک نوشته را به لینک تبدیل کنید مسلماً از تگهای <a> و </a> استفاده می کنید. بنابراین این سلکتور تمامی نوشته هایی که داخل اینگونه تگها قرار می گیرند را استایل دهی می کنند.

» a:visited - این کد برای استایل یا صفحه آرایی لینکهایی که قبلاً کلیک شده است (صفحه های دیده شده)، بکار برده می شود، بنابراین Visited داخل a:visited نوشته شده است.

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

a:link{
text-decoration: underline;
color: #336699;
}
a:visited{
text-decoration: underline;
color: #336699;
}

• مرحله دوم :

کد های زیر را زیر سکلتورهای a:link, a:visited{ } تایپ کنید:

a:hover{
text-decoration: none;
}

◊ حال این کد برای چیست؟
سلکتور a:hover برای زمانی مورد استفاده قرار می گیرد که شما کرسر موس را بروی لینکها می برید. و چون ما کد text-decoration: none; را برای این سکلتور قرار داده ایم، کاری کردیم که هرگاه کرسر موس بروی لینکی قرار گرفت، خط زیرین آن ناپدید شود.
اگر شما می خواهید که هنگام قرار گرفتن کرسر بروی لینکها رنگ آنها نیز تغییر کند، می توانید از کد زیر استفاده کنید، کاملاً همه چیز مشخص است و فکر نکنم که نیازی به توضیح داشته باشد:

a:hover{
text-decoration: none;
color: #ff0000;
}

این درس خیلی کوتاه بود، منتظر درسهای بعدی باشید….. ناراحت نباشید چون  مطلب طولانی نشانه ی ننوشتن است….. (ضرب المثل گرفته شده از فرهنگستان وبلاگستان)

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 14)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 16)

Write a quick comment | مشاهده‌ 6 نظر دیگر

انتظار ها به سر رسید و جلسه ی کار با Css هم از همین الان شروع شد، می دانم که زمان زیادی بود که در انتظار این لحظه بوده اید. در این جلسه به شما مقدمات Css و Style.css را خواهیم گفت، کار با css بسیار ساده است و تنها باید ماهیت آن را درک کنید، از طرفی چون مبحث گسترده ای است، ما نمی توانیم همه آن را در این سری آموزشی به شما بگوییم، فقط مباحثی که به کارمان مربوط است. البته سعی داریم که ماهیت Css را برای شما تشریح کنیم که در این صورت ۹۲% مشکلات برای شما حل خواهد شد.

البته قبل از شروع یادگیری Css باید تراژدی عدم هماهنگی آن با مرورگرهای مختلف نیز گفته شود، مشکلی که بسیاری از اختیارات را از طراحان قالب سلب می کند. امیدوارم که در ابتدای درس به شما استرسی وارد نکنم. نگاه کنید اگر بخواهم قضیه را خیلی ساده برای شما شرح دهم ، باید بگویم که مرورگرهای مختلف از دستورات CSS برداشتهای گوناگونی دارند(البته خیال نکنید که این برداشتها بسیار متفاوتند)، از همین جهت ممکن است قالبی در مرورگر فایرفاکس به خوبی نشان داده شود ولی در مرورگر اینترنت اکسپلورر با ایراد و عدم هماهنگی اجزای صفحه نمایش داده شود. خود من به شخصه در بین مرورگرها می توانم فایرفاکس را فوق العاده نام ببرم(البته اپرا را امتحان نکرده ام)، به گونه ای که اکثر قالبها بدون مشکل و دردسر و یک سیستم منطقی نشان داده می شوند. اما از طرفی اینترنت اکسپلورر و بخصوص اینترنت اکسپلورر ۶ بسیار شما را از بابت طراحی آزار خواهند داد (انگار که در این مرورگر منطقی حکم فرما نیست). یکی از آروزهای طراحان براندازی اینترنت اکسپلورر ۶ است که امیدوارم تحقق یابد. از درد و دل که بگذریم، بهتر است روش کار را به شما بگویم.

شما روشهای گوناگونی را برای کار با Css می توانید، استفاده کنید:
روش ۱- چندین مرورگر مختلف را باز کرده و هر تغییری را که اعمال می کنید در تمامی مرورگرها بخصوص در اینترنت اکسپلورر مشاهده کنید و در صورت مشاهده ی ایراد، مشکلات را برطرف کنید. این روش سخت ترین روش موجود است، چرا که هماهنگی قالب با تمامی مروگر ها کار آسانی نیست، البته باید در اینجا این نکته را عرض کنم که تنها اینترنت اکسپلوررها هستند که تعبیرشان از قوانین Css خیلی متفاوت است، سایر مرورگرها مانند اپرا ، فایرفاکس ، گوگل کروم و… تعبیر بسیار متشابه ای دارند و از این جهت کار شما خیلی آسان است. فکر نکنم که از این روش خوش تان آمده باشد، پس روش دوم که روش خود من است را عمل کنید:

روش ۲- من به شخصه ابتدا با مرورگر فایرفاکس قالبم را می سازم و در آخر هنگامی که کاملاً ساخته شد، یک Css جدا برای مروگر های اینترنت اکسپلورر ۶ و ۷  ساخته و قالب را با آنها سازگار می کنم. انصافاً این روش خیلی ساده تر است. این نکته را نیز همین جا بگویم که شما می توانید یک Css جدا ساخته که برای مثال فقط در اینترنت اکسپلورر ۷ یا فقط در اینترنت اکسپلورر۶ قابل خواندن و استفاده باشد. چگونگی انجام اینکار را بعداً به شما خواهم گفت ولی اگر باز فراموش کردم، حتماً یادآوری کنید….

خوب به ادامه مطلب برای شروع درس مراجعه کنید….

بهترین راه برای یادگیری CSS غوطه ور شدن در آن است، برخلاف PHP و XHTML ، شما نیاز ندارید که فایلهای مرکز قالب تان را لمس کنید. همچنین در Css بهترین روش یادگیری، روش آزمون و خطا می باشد.

اگر فایل Style.css را که درون پوشه tutorial وجود دارد، باز کنید. ۶ خط را مشاهده خواهید کرد، این ۶ خط فقط برای وردپرس معنی می دهند که در ادامه معنای آنها را خواهیم گفت:

* خط اول مربوط به نام پوسته است که الان Tutorial نوشته شده است، پس در وردپرس نیز قالب شما با این نام نشان داده خواهد شد. می توانید هر نامی که خواستید را برای این قسمت بگذارید.
* خط  دوم مربوط به آدرس صفحه پوسته در وب می باشد، چون بعضی از پوسته ها توضیحات اضافی نیز دارند.
* خط  سوم توضیح خود پوسته است که در وردپرس نشان داده خواهد شد.
* خط شماره ی چهارم که دیگر تقریباً مشخص است. درباره ی ورژن پوسته ی شما می باشد، چون ممکن است برای یک پوسته چندین ورژن ارائه داده باشید، در اینجا می توانید معین کنید قالب شما الان چه ورژنی است.
* خط پنجم و ششم، نام سازنده ی قالب و آدرس وب او می باشد، که در اینجا باید نام خود و آدرس وب سایت خود را وارد کنید.

علامت /* و */ بدور اطلاعات پوسته ی شما قرار می گیرد تا محتوای اصلی فایل Css شما از اطلاعات پوسته ی شما مجزا باقی بماند و با هم ادغام نشود. هنگام کار با Css گاهی اوقات لازم است برای بعضی از خطها توضیح بگذارید، تا هم خود شما و هم دیگرانی که از این قالب استفاده می کنند، سردرگم نشوند. برای اینکار توضیحات خود را داخل علامت /* و */ قرار دهید، تا مشکلی برای فایل Css تان پیش نیاید. اگر از Notepadd++ استفاده کنید، خواهید دید که نوشته هایی که بین این دو علامت قرار بگیرند با رنگ سبز مشخص خواهند شد.

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

حال شروع آموزش (انصافاً مقدمه خیلی طولانی شد)…..

• مرحله ی اول :

* کنترل برنامه ی Xampp ، فولدر پوسته ها، یک مرورگر فایرفاکس و فایل Style.css را باز کنید.
* مرورگر فایرفاکس را به آدرس http://localhost/wordpress هدایت کنید.

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

(توجه: در این درس نیازی نیست که فایل Index.php را باز کنید)
اگر هم برنامه ی Notepad++ را نصب نکرده اید و قادر هم نیستید که فایل Style.css را در Notepad باز کنید، بروی فایل Styel.css راست کلیک کرده در زیرمجموعه Open with گزینه ی Choose Program… را انتخاب کنید و در پنجره ی باز شده، Notepad را انتخاب کرده و ok را کلیک کنید.

• مرحله ی دوم:

کدهای زیر را در فایل Style.css تایپ کنید :

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

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

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

تغییرات را در فایل Style.css ثبت کنید و صفحه را refresh کنید، تا تغییرات را مشاهده کنید.

علامت { یعنی باز و } به معنی بسته بودن است و داخل } و { علامت دو نقطه (:) یعنی شروع مقدار دهی و سیمی کولن (;) یعنی توقف کد موردنظر.

اما به چه دلیل ما کلمه ی body{} (سلکتور Css) را در Css مورد استفاده قرار دادیم. دلیل این هست که هر چیزی از صفحه ی وب بین تگهای <body> و </body> قرار دارد، در نتیجه هنگامی که شما به این تگ استایل بدهید، یعنی به کل صفحه وب استایل داده اید، بنابراین کدهایی که در این استایل قرار دارند بروی کل صفحه ی وب اعمال خواهند شد. بعدها عناصر جزئی تر صفحه را نیز استایل خواهیم داد.

◊ توضیحات بیشتر:

» margin: 0 - توضیح این مورد کمی برای من سخت است، البته نترسید، کمی توضیح دادنش برای شما دشوار است، در حقیقت زمانی به درستی این موضوع را خواهید فهمید که خود شما دست به کار شده و با آزمون و خطا متوجه شوید که این گزینه ها برای چه هستند(این گزینه را خیلی راحت می توانید درک کنید، مشکل اصلی برای فهمیدن Padding هست که در جلسات بعد به شما خواهم گفت و کاری شبیه به همین margin را انجام می دهد. مهم نیست….. درس امروز را متوجه شوید، کافیست). در حقیقت margin یک حاشیه برای شما بوجود می آورد و فضا را به مقداری که شما لازم دارید تخلیه می کند. الان مقدار margin برابر با صفر است یعنی هیچگونه حاشیه یا فضای خالی نخواهید داشت ولی اگر می خواهید یک حاشیه  داشته باشید، عدد صفر را به ۱۰px یا ۲۰px ، یا غیره… تغییر دهید. برای هر عددی که می نویسید باید واحد آن را نیز بیان کنید. تنها عدد صفر است که اگر واحد آنرا ننویسید مشکلی پیش نمی آید.
نکته۱: هر پیکسلی یک نقطه روی صفحه ی کامپیوتر است.
نکته۲: خیال نکنید که این حاشیه ای که در مورد آن صحبت می کنیم قابل دیدن است، این حاشیه یه حاشیه نامرئی می باشد. در حقیقت حاشیه در اینجا معنی فاصله را می دهد.

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

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

» font-family: Arial, Helvetica, Georgia, Sans-serif; - این خط، فونت هایی را برای صفحه ی وب، تعریف می کند. همانگونه که مشاهده می کنید، در این قسمت اسم چهار فونت نوشته شده است، حال فایل Style.css در ابتدا از فونت Arial برای نشان دادن متنها استفاده می کند. اگر کاربری فونت Arial را بروی کامپیوترش نداشت، فایل Style.css نوشته های صفحه ی وب را با فونت Helvetica برای کامپیوتر کاربر نشان خواهد داد، به همین ترتیب فونت Georgia و در آخر Sans-serif در صورت نداشتن سه فونت اولی نشان داده خواهد شد. شما می توانید هر فونتی را که مایل بودید در این قسمت قرار دهید.

» font-size: 12px; - این گزینه مشخص است، شماره را بزرگتر و یا کوچکتر کنید تا تغییرات را مشاهده کنید.

» text-align: left; - این گزینه نوشته های صفحه را به سمت چپ، تراز می کند. این کد را به text-align: right; تغییر دهید، تا تغییرات را مشاهده کنید.

» vertical-align: top; - این کد هر چیزی در صفحه را از بالا مقایسه می کند. اگر شما مقدار را بجای top به middle و یا bottom تغییر دهید، آنگاه تگ body از همان طرف مقایسه می شود. امتحان کردنش رایگان است….

» background: #ffffff; - این کد یعنی، رنگ پس زمینه برای صفحه وب، که در اینجا ما رنگ را سفید قرار داده ایم. عبارت #ffffff یک کد hex برای سفید و مقدار #۰۰۰۰۰۰ یک کد hex برای سیاه می باشد. در جلسات بعد خیلی خوب با این کدها آشنا می شوید، الان مغز خود را زیاد درگیر این قضیه نکنید.

» color: #000000; - این کد مربوط به رنگ فونتها یا نوشتها می شود، که در اینجا رنگ متن ها را سیاه قرار داده ایم.

پیشنهاد می کنم که برای یادگیری بیشتر CSS حتماً به سایت w3schools.com نیز سری بزنید….

پ.ن: بعد از تغییراتی که ایجاد کردید، و آزمایشهایی که بروی کدها انجام دادید، تمامی تغییرات را به حالت اول بازگردانید.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 15)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 18)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• پوسته رادیان ورژن 2 برای وردپرس

Write a quick comment | مشاهده‌ 4 نظر دیگر

این بار دو جلسه را بصورت یکجا به شما خواهیم گفت. امیدوارم که با اینکار بتوانم رضایت شما عزیزان را جلب کرده باشم. قبل از اینکه درس را به صورت جدی شروع کنم، باز و باز و باز هم این مسئله ی تکراری را می گویم که از ابتدا شروع کنید….. (البته انصافاً این بار خلاصه گفتم)

بعد از گفتن مقدمه باید این نکته را نیز عرض کنم که در ابتدای جلسه، کار با postmetadata را شروع خواهیم کرد و سپس در جلسه ی بعد یا همان بخش دوم که در ادامه ی همین درس خواهیم داشت، به شما Else, Post ID, Link Title را معرفی خواهیم کرد. درس را با نیرویی مضاعف شروع می کنیم….

بعلت طولانی شدن صفحه، برای مطالعه ی درسهای هشتم و نهم به ادامه مطلب مراجعه کنید….

نکته: برای بزرگ دین عکس ها بروی آنها کلیک کنید.

درس هشتم – Postmetadata:

◊ postmetadata چیست؟

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

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

اجازه بدهید که در ابتدا، آنچه را که در دروس قبل گفته ایم، بررسی کنیم، شما باید تا الان مانند آنچه که در عکس زیر موجود است را در فایل index.php داشته باشید:

● مرحله ی اول:

کدهای موجود در فایل  postmetadata.txt را در زیر کد <?php the_content(); ?> کپی و پیست کنید (توجه: این بار شما می توانید از کپی و پیست استفاده کنید. شما لازم نیست که بطور کامل کدهایی که در این قسمت اضافه کردیم را متوجه بشوید. همین که بدانید هر گروه از کدها چه اعمالی را انجام می دهند، کافی است)

عکس زیر بخشی از کدهای اضافه شده را نشان می دهد.  سعی کنید که کدهایتان را سازماندهی کنید (بوسیله ی دکمه Tab)

حال تغییرات را ثبت کرده و صفحه را refresh کنید.

شما همچنین می توانید به کدهای پنجره ی source از مرورگرتان نگاهی بیاندازید تا کدهای postmetadata را مشاهده کنید و متوجه شوید که اینگونه کدها به چه شکلی ظاهر می شوند. بیاد بیاورد که من به شما نشان دادم که چگونه پنجره ی کدهای Source را بگشایید. برای اینکار به تب view رفته و سپس Page Source یا Source را انتخاب کنید.

◊ توضیحات مربوط به کدهای اضافه شده:

» <p class=”postmetadata”> و </p> - تمامی اطلاعات postmetadata بین تگ های پاراگراف (P) با مقدار class=”postmetadata” قرار می گیرند، زیرا من می خواهم تا postmetadata را از سایر محتوا (Content) یا همان مطالب ورودی مجزا کنم. بدون تگ پاراگراف (P)، اطلاعات postmetadata در هر کجا که محتوا (Content) یا همان مطالب ورودی تان پایان یابد، نشان داده خواهد شد، و همچنین، هیچگونه فاصله ای بین مطالب ورودی (Content) و postmetadata وجود نخواهد داشت.

» <?php _e(’Filed under:’); ?> - عبارت &amp#58 کدی هست که عبارت دو نقطه ( : ) را  صدا می زند و همچنین کد <?php _e(’ ‘); ?> بدور Filed under&#58 قرار می گیرد، البته شما می توانید به سادگی Filed under: را  تایپ کنید، ولی بیاد داشته باشید که می خواهیم زمانی این پوسته را به فارسی ترجمه کنیم و در صورتی که اینکار را انجام نداده باشید، با مشکل روبرو خواهیم شد. در جلسات پایانی که نحوه ی فارسی سازی پوسته را به شما خواهم گفت، کاربرد کد _e(’ ‘) را بهتر متوجه خواهید شد.

» <?php the_category(’, ‘); ?> - عبارت the_category() یک تابع از php می باشد و دسته ها (category) را صدا می زند. دسته هایی که شما مطلب تان را در آنها قرار داده اید. حال که شما  Filed under: و the_category() را با یکدیگر قرار داده اید، خواهید داشت Filed under: Name of category 1, Name of category 2 . علامت کامایی که (،) بین نقل قول the_category(’, ‘) قرار دارد، برای جدا کردن دسته ها بوسیله ی کاما(،) گذاشته شده است، که می توانید آنرا با هر چیز دیگری عوض کنید (کاما در حقیقت بین هر دسته قرار می گیرد تا دسته ها را از یکدیگر جدا کند. اگر متوجه نشده اید، کاما را با / عوض کنید و صفحه را Refresh نمایید تا تغییرات بوجود آمده، باعث فهم شما شود، البته این نکته را باید بگویم که شما باید مطالبتان را در چند دسته یا Category مختلف قرار داده باشید تا بتوانید این تغییرات را مشاهده کنید. اگر باز هم متوجه نشده اید که چه می گویم، این مبحث را بدون تغییر رها کنید و مطمئن باشید که روزی خواهید فهمید)

» <?php _e(’by’); ?> - این عبارت مانند همان کاری هست که برای Filed under: کردیم. اگر شما یک پوسته برای استفاه ی شخصی می سازید، می توانید عبارت _e() را بدور کلمه هایتان قرار ندهید. اما اگر پوسته ای می سازید که برای عموم است، قرار دادن این عبارت بسیار اهمیت دارد. بطور کلی بگویم که هر پوسته ای را چه برای خود و چه برای هر شخص دیگری می سازید، اگر می خواهید که پوسته تان استاندارد و استفاده از آن راحت باشد، از کد _e() حتماً استفاده کنید. در جلسات پایانی اهمیت آنرا بیشتر حس خواهید کرد.

» <?php the_author(); ?> - نیازی به توضیح ندارد، این تابع به سادگی  نام شخصی که این پست و یا مطلب را منتشر کرده است را چاپ می کند.

» <?php comments_popup_link(’No Comments »’, ‘۱ Comment »’, ‘% Comments »’); ?> -
عبارت comments_popup_link() تعداد نظراتی که برای هر پست داده شده است را صدا زده و نمایش می دهد. عبارت No Comments &#187; هنگامی نشان داده می شود که برای مطلب شما هیچ نظری وجود نداشته باشد. عبارت ۱ Comment » هنگامی نمایش داده می شود که برای مطلب شما تنها یک نظر وجود داشته باشد، و در آخر عبارت % Comments &187; هنگامی استفاده می شود که تعداد نظرات شما بیش از یک نظر باشد. برای مثال ۸ Comments » . علامت درصد (%) بجای تعداد نظرات و عبارت &#187 نیز کد شکل » می باشد.

» <?php edit_post_link(’Edit’, ‘ | ‘, ”); ?> - این کد تنها زمانی استفاده خواهد شد که شما بعنوان مدیر وارد وبلاگتان شده باشید. عبارت edit_post_link() به سادگی لینک Edit را برای هر پستی به مدیر وبلاگ نشان می دهد تا اگر مایل بود، قادر باشید که پست مورد نظرش را به آسانی تصحیح کند. عبارت edit_post_link() سه گروه از علامت نقل قول را دارا می باشد. اولین علامت نقل قول برای آن است که کلمه ویرایش پست با چه عنوانی نمایش داده شود. اگر شما برای مثال عبارت Edit Post را بجای کلمه ی Edit بنویسید آنگاه به شما کلمه Edit Post در عوض کلمه ی Edit نمایش داده خواهد شد. دومین گروه از علامت نقل قول ها تنها برای آن می آید که عبارتی را قبل از کلمه ی Edit قرار دهد. در اینجا یک خط عمود (|) که کد آن هم &124 است نمایش داده خواهد شد. سومین گروه از علامت های نقل قول برای این است که شکلی را بعد از کلمه ی Edit قرار دهد و چون درون آن هیچ عبارتی قرار داده نشده است، هیچ شکلی نیز مشاهده نخواهد شد. کاملا می فهمم که در این مورد کمی گیچ شده اید، می توانم بیشتر توضیح بدهم ولی اینکار را انجام نمی دهم و از خود شما می خواهم که با تغییر محتوای داخلی این سه گیومه متوجه شوید که منظور من چیست. فقط تغییرات را بعد از آزمایشات گوناگون به حالتی که الان وجود دارد، برگردانید.

توجه: بعنوان مدیر وبلاگ وارد بخش مدیریت شوید سپس به صفحه ی اصلی سایت برگردید و لینک Edit را مشاهده کنید.

◊ اما یه چیزی را فراموش کرده ایم!!؟

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

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

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

در بخش دوم از این سری، شما را با Else, Post ID, Link Title آشنا خواهیم کرد.

درس نهم (بخش دوم) – آشنایی با Else, Post ID, Link Title:

این درس Else, Post ID, Link Title را پوشش می دهد، که البته تنظیمات اضافی محسوب می شوند و اضافه کردن آنها اختیاری است، اما شما این تنظیمات را در هر پوسته ای خواهید یافت، زیرا شما نمی دانید، اشخاص برای چه اهدافی از پوسته ی شما استفاده می کنند. این بار به سرعت به سراغ مراحل می رویم و در طول آموزش، توضیحات لازمه را می دهیم.

● مرحله ی اول:

کدهای پایین را در زیر کد <?php endwhile; ?> تایپ کنید:

<?php else : ?>

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>

باید تصویری شبیه به زیر داشته باشید (توجه کنید برای سازماندهی کدها از tab استفاده کنید):

تغییرات را ثبت کنید و صفحه را نیز Refresh نمایید، اما شما نباید هیچ تغییری را مشاهده کنید. حال به توضیح آنچه که تایپ کردید، می پردازیم:

به کدهای زیر توجه کنید :

<?php if(have_posts()) : ?>

<?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

ابتدا if(have_posts()) چک می کند که آیا هیچ گونه پستی در این وبلاگ وجود دارد یا خیر. سپس حلقه ی while(have_posts()) دستور the_post() را برای صدا زدن پست های شما اجرا می کند. عبارت else برای زمانی است که هیچ پستی وجود نداشته باشد. اگر کمی با برنامه نویسی php آشنا باشید، براحتی منظور من را متوجه شده اید، اما اگر آگاهی چندانی از این زبان ندارید، به زبان عامیانه باید اینگونه عرض کنم که عبارت شرطی if که به معنای اگر است، ابتدا سعی می شود که اجرا گردد، اما اگر این شرط بدلیل نبود پست، اجرا نشد، عبارت else که به معنای در غیر اینصورت است، اجرا خواهد شد. یعنی یا if اجرا می شود و یا else و البته عبارت شرطی if به else ارجحیت دارد. امیدوارم که منظور من را متوجه شده باشید. توجه شود، هنگامی که شرطی را آغاز می کنید، باید پایان آن شرط را در آخر مشخص کنید، بنابراین برای پایان دادن به شرط if از دستور <?php endif; ?> کمک گرفته ایم. همین موضوع برای حلقه نیز صادق است، یعنی زمانی که حلقه ای را شروع کردیم، باید پایان آن را نیز مشخص کنیم، پس برای مشخص کردن پایان حلقه از عبارت <?php endwhile; ?> استفاده کردیم. اگر جلسه ی اول را بیاد بیاورید در مورد قانون تو در تویی توضیح دادیم، که نمود بارز آن در اینجا مشخص است.اگر دقت کنید متوجه می شوید که ابتدا شرط آغاز شده ، سپس حلقه آغاز شده ، بعد دستورات داخل حلقه اجرا شده، سپس حلقه بسته شده و در آخر شرط نیز بسته می شود، یعنی هیچگونه تداخلی در باز و بسته شدن اینگونه کدها نباید وجود داشته باشد.

حالا شما می دانید که else برای چیست. در زیر مجموعه ی else یک باکس مخفی ایجاد کردیم و داخل آن نوشته ایم Not Found یا همان یافت نشد خودمان. این بدین معنی است که اگر پستی وجود داشت که هیچ، ولی اگر پستی یافت نشد، آنگاه عبارت Not Found برای شخص بیننده نمایش داده خواهد شد. چه منطقی و ساده….

در مثال بالا، پیغام Not Found درون <?php _e(’ ‘); ?> قرار گرفته است. دیگر توضیح نمی دهم که اینکار برای چیست.

تمامی پیغام ها و کدها برای عبارت Not Found با تگ های <h2> و </h2> احاطه شده است. البته اینکار آنچنان واجب نیست. اینکار را برای این انجام داده ایم که نوشته ی ما بزرگتر به نظر برسد و بیننده راحت تر بفهمد که اشتباه کرده است و چیزی را در سایت شما پیدا نمی کند، شوخی کردم، امیدوارم که سایت شما پر از محتوا باشد.

◊ اما تگ های <div class=”post”> و </div> برای چه هستند؟
خوب مشخص است، جوابش را شما بگویید. بعد از این همه جلسه دیگر نگفتنش مایه آبروریزیست.

● مرحله ی دوم:

مقدار id=”post-<?php the_id(); ?>” را به <div class=”post”> اضافه کنید:

تغییرات را ثبت کرده و مرورگرتان را refresh کنید. حال به تب View رفته و Page Source یا Source را انتخاب کنید . شما خواهید دید که هر پستی حالا یک شماره یا id دارد که به آن اضافه شده است. کد the_id() به سادگی id هر پستی را صدا می زند و آنرا در کد صفحه نشان می دهد. حتماً دیده اید که سایتهای وردپرس در حالت عادی آدرس سایتشان به صورت http://www.p30help.ir/?p=125 است، عدد ۱۲۵ همان مقدار id می باشد.

◊ چرا اینکار را کردیم؟
اینکار برای این است که بطور اختصاصی یک پست خاص را مورد هدف قرار دهیم. برای مثال شاید شما بخواهید که ظاهر یکی از پست هایتان با سایر پست ها متمایز باشد، برای ایجاد تمایز بین پست ها، ما این عمل را انجام دادیم. بعدها، هنگامی که شما از فایل Style.css استفاه می کنید. به کمک id منحصر به فردی که هر پست دارد، قادرید تا این تمایز را بین هر پست ایجاد کنید.

◊ چطور می توان هم Class و هم id را برای یک div یا باکس مخفی قرار داد؟
div یک تگ هست، اما class یک مشخصه می باشد. id نیز یک مشخصه است. هر تگی می تواند چندین مشخصه را قبول کند مثل تگ div که می تواند ۲ مشخصه ی class و id را قبول کرده است.(توجه کنید id یک مشخصه ی Xhtml و عبارت the_ID() یک تابع php است و این دو با یکدیگر متفاوتند).

● مرحله سوم :

عبارت title=”<?php the_title(); ?>” را به لینک عنوان پست ها اضافه کنید.

عکس بالا یک قطعه از اسکرین شات است تا به شما نشان دهد که کد را کجا باید قرار دهید. تغییرات را save کرده و مرورگرتان را refersh کنید. به view source دوباره بازگردید. وقتی که پنجره ی Source رامشاهدده کردید، post title link را جستجو کنید. اگر عنوان مطلب شما Hello World باشد، آنگاه باید title=”Hello World” را داشته باشید.

توضیح: title=”” یکی دیگر از مشخصه های xhtml برای تگ لینک (<a>) می باشد. هرچیزی که داخل علامت نقل قول قرار گیرد، برای توصیف لینک شما بکار برده می شود. در این مورد، عنوان هر پست، توصیف همان لینک نیز می باشد، این هست دلیل اینکه چرا از تابع پی اچ پی the_title() دوباره استفاده کردیم.

اگر نمی خواهید از the_title() بعنوان یک مقدار برای title=”” استفاده کنید، آنگاه می توانید مقدار دیگری که title=”” بگذارید، تا بعنوان توصیفات برای لینک عنوان مطلب شما محسوب  شود. برای مثال، اگر در عوض the_title() ، شما از title=”Click me” استفاده کنید، توصیف برای عنوان هر پست Click me خواهد بود.

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

◊ این عمل برای چیست؟
هرگاه که شما پستی را منتشر کردید، وردپرس Technorati.com و سایتهای دیگر رامطلع می سازد. ربات Technorati.com سپس به وبلاگ شما آمده و مطالب جدیدتان را تجسس کرده و در آخر یک خلاصه ای از پست شما را ایندکس می کند، که این خلاصه ، شامل عنوان توضیحات مطلبتان نیز می شود. کلاً بدانید که چیز خوبی است….

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

پی نوشت: خواستم این پست شامل سه درس باشد، اما هم خودم واقعاً خسته شدم و هم اینکه یاد دهی مطالب زیاد باعث عدم هضم این مطالب می گردد.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 3)
• چگونه برای وردپرس پوسته بسازیم؟
• چگونه پوسته های وردپرس را فارسی کنیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• قالب شایان برای وردپرس
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)

Write a quick comment | مشاهده‌ 26 نظر دیگر

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

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

بعلت طولانی شدن صفحه به ادامه مطلب مراجعه کنید.

● مرحله ی اول: باز و فعال کردن برنامه ی Xampp

به فولدر اصلی این برنامه بروید. My Computer > xampp و یا C:xampp (یا هر جای دیگری که این برنامه را نصب کرده اید.)

بروی xampp-control.exe کلیک کنید . پنجره ای با حالت pop up باز خواهد شد. آپاچی (Apache) و Mysql را اجرا کنید. برای اینکار شکل برنامه باید مانند تصویر زیر شده باشد:

حال موتور آپاچی و MySql روشن شده و آماده برای کار هستند.  برنامه را کوچک کنید.

● مرحله ی دوم :  ساخت یک فولدر برای پوسته

به بخش پوسته های وردپرس بروید ، یعنی آدرس زیر:
xampp/htdocs/wordpress/wp-content/themes
در این مکان فولدری بنام tutorial بسازید. به همین سادگی…

● مرحله ی سوم: ساخته فایل index.php و style.css

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

فایل index.txt را دانلود کرده و هرآنچه داخل این فایل هست را کپی کرده و در برنامه ی notepad بچسبانید (paste کنید.)

بعد از اینکار فایل notepad را درون پوشه ی tutorial بنام index.php ذخیره کنید.

دوباره ی یک notepad جدید باز کنید (باید کاملاً خالی باشد) . در همان حالت کاملاً خالی فایل notepad را با نام Style.css درون فولدر tutorial ذخیره کنید. حال پنجره های notepad را ببندید.

بعد از این اعمال شما درون این فولدر باید فایلهایی با نام های style.css و index.php داشته باشید.

▫ توضیحات index.php :

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

» Doctype - این عبارت نشان می دهد که شما از چه نوع کدی در پوسته تان استفاده کرده اید .فهم Doctype زیاد اهمیت ندارد . من خودم ویژگیهای Doctype را تعیین کردم ، بنابراین شما نیازی نیست که در این مورد زیاد فکر کنید.

» <html> - این تگ نشان می دهد که صفحه ی وب شما از کجا شروع می شود.

» <head> - این تگ به ما نشان می دهد که سر (head) صفحه ی وب ما از کجا شروع می شود. هر صفحه ی وبی شامل یک body و head می باشد. </head> تگ به شما نشان می دهد که تگ head کجا تمام می شود.

<?php bloginfo(’stylesheet_url’); ?> یک تابع (function) هست که صدا می زند یا فرا می خواند برای مکانی که فایل style.css در آن قرار دارد (البته در همان فولدر که در اینجا فولدر tutorial می شود) بنابراین پوسته ی ما می تواند به آن و یا هر استایل دیگری برای صفحه ی وب مان لینک بدهد . هرگاه کدی قرار بگیرد  بین عبارت های <?php و ?> این قسمت از کد زبان PHP محسوب می گردد که با گروه دیگر کدهای من تفاوت دارد . در زبان php عبارت <?php نشان از شروع و عبارت?> نشان دهنده ی پایان کدهای پی اچ پی می باشد.

بنابراین :

» <?php - یعنی شروع کدهای php
» bloginfo(’stylesheet_url’) - صدا می زند برای مکانی که style.css قرار دارد.
» ; - صدا زدن یا فراخواندن برای Style.css را متوقف می کند . سی می کالون(;) یک راه برای بستن گروهی از کدهای php هست . بنابراین هرگاه که عبارت ; را مشاهده کردید ، بدانید که یک دستوری از پی اچ پی پایان یافته است.
» ?> - یعنی پایان کدهای php

توجه: دقت کنید که هرگاه عبارت ؟> بیاید ،یعنی کدهای PHP تمام شده است . در صورتی که اگر ; باید یعنی اینکه یک خط از دستورات PHP پایان یافته است. برای پایان دادن به هر دستور از PHP یک سی می کالون می آید در حالی که ؟> برای کل دستورها بکار می رود.

ادامه بدهید…

» <body> - این تگ نشان می دهد که بدنه ی اصلی صفحه ی وب ما از کجا شروع می شود. بدنه شامل هر چیزی می شود که ما بروی صفحه ی وب می بینم و می خوانم . شمایی که در حال خواندن این آموزش هستید یعنی در حال نگاه کردن به بدنه ی صفحه ی وب این صفحه هستید . تگ </body> هم نشان دهنده ی این است که بدنه صفحه ی وب پایان یافته است.(مشخص است دیگر)

» </html> - این تگ نشان دهنده ی این است که صفحه ی وب من تمام شده است و هیچ چیز دیگری بعد از آن نیست.

● مرحله ی چهارم : هر چیزی که داخل فایل style.txt هست را به درون فایل style.css که در فولدر tutorial قرار دارد ، کپی و پیست کنید و تغییرات را save نموده و صفحه را ببنید.

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

درون آدرس بار مرورگرتان تایپ کنید عبارت :
http://localhost/wordpress/wp-admin
و سپس به داخل بخش مدیریت وردپرس  بروید.
(wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس گذاشته اید.)

هنگامی که داخل بخش وردپرس شدید ، به بخش مدیریت پوسته ها بروید و پوسته ی Tutorial را فعال نمایید.

توجه کنید که پوسته ی شما هنوز هیچگونه عکس بند انگشتی (thumbnail) ندارد. و باکس آن خالی از عکس می باشد . عکس آن به صورت زیر باید باشد:

حال یک صفحه ی جدید در مرورگر باز کنید و بروید به آدرس http://localhost/wordpress . شما یک صفحه ی خالی را (blank page) خواهید دید . منظورم یک صفحه ی کاملاً خالی است. اگر صفحه ی باز شده کاملاً خالی نیست ، شما صفحه ی اشتباهی را گشوده اید و یا اشتباهی در کارتان بوده است.
توجه : wordpress که با رنگ قرمز مشخص شده است نشان دهنده ی این است که این عبارت فقط یک مثال است و بستگی دارد به نامی که شما برای فولدر وردپرس انتخاب کرده اید.

حال پوسته ی شما منتشر شده است. فکر کنم که برای این جلسه کافیست . در جلسه ی بعدی ، ما  کار با header template را شروع خواهیم کرد.

فراموش نکنید که بخش کنترل Xampp را ببندید. برای اینکار بروی آیکون آن در بخش system tray دوبار کلیک کنید  و Mysql و Apache را متوقف کنید ، سپس بروی Exit کلیک نمایید.
مانند عکس زیر:

منتظر درس بعدی از این سری باشید.

مطالب مرتبط

• چگونه برای وردپرس پوسته بسازیم؟
• چگونه برای وردپرس پوسته بسازیم؟(بخش 19)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 4)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 20)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 6)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 5)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 2)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 21 و پایانی)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 8 و 9)
• چگونه برای وردپرس پوسته بسازیم؟(بخش 7)

Write a quick comment | مشاهده‌ 66 نظر دیگر