دانلود از ۴shared

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

مطالب مرتبط

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

Write a quick comment | View 42 more comment(s).

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

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

۱- علی ایرانی از مدت ها قبل نحوه ی فارسی سازی پوسته های وردپرس را در ۵ جلسه آموزش داده است، این مطالب می تواند برای شما بسیار مفید باشد (+)

۲- ناقیس عزیز هم آموزش سریع فارسی سازی پوسته های وردپرس رو در چند جلسه آموزش داده، مسلماً این آموزش هم مثل بقیه ی کارهای بهرنگ عزیز خوب و مفید خواهد بود (+)

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

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

آپدیت (۸ اردیبهشت ۸۹)- با توجه به اینکه لینک دانلودها مشکل پیدا کرده اند، فایل مورد نظر را در سایت ۴shared آپلود کرده ام که از طریق لینک زیر قادر به دریافت آن هستید:

لینک دانلود

۴- حمید رضای عزیز نحوه ی فارسی سازی و هم کار با نرم افزار آرتیستر را تهیه کرده است که حتماً مفید خواهد بود.(+)

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

مطالب مرتبط

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

Write a quick comment | View 19 more comment(s).

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

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

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

در ابتدا باید بگویم که روش ساختن بخش نظرات به دوشکل ممکن است، یک- حالت پیش فرض وردپرس، که با تایپ فقط یک خط کد امکانش میسر می شود. دو- روشی که ما نظرات را با نظر و سلیقه ی خود، درون فایلی بنام 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 | View 38 more comment(s).

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

با سپاس فراوان…..

مطالب مرتبط

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

Write a quick comment | View 7 more comment(s).

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

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

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

۱- در بخش تنظیمات وردپرس بروی تنظیمات قالب شایان کلیک کنید.

۲- در فیلد مورد نظر آدرس خوراک خود را در فیدبرنر وارد کرده و بروی ذخیره تغییرات کلیک کنید.

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

پیش نمایش و دانلود پوسته

———————————

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

مطالب مرتبط

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

Write a quick comment | View 75 more comment(s).

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

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

• مرحله ی اول:

در این مرحله می خواهیم که صفحه ای برای بخش آرشیو بسازیم. پس برای اینکار مراحل زیر را انجام دهید.

» یک فایل بنام  archive.php بسازید
» تمامی کدهای موجود در فایل index.php را کپی کرده و داخل فایل archive.php بچسبانید.
» در داخل فایل archive.php تابع the_content را به the_excerpt تغییر دهید.
» حال دوباره فایل archive.php را save کنید.

همانطور که از نام فایل archive.php مشخص است این فایل برای نحوه ی نشان دادن صفحه ی آرشیو وبلاگ بکار می رود. و البته ما در اینجا این صفحه را دقیقاً مانند صفحه ی اصلی سایت طراحی کردیم بغیر از یک تغییر کوچک که در آن بوجود آوردیم. حال برای فهم بیشتر بروی یکی از آرشیو های قدیمی وبلاگ خود کلیک کنید تا تغییرات را متوجه شوید.

بله درست است در صفحه ی آرشیو شما تنها خلاصه از هر مطلب را مشاهده می کنید نه کل مطلب را. عبارت the_excerpt بجای کد the_content باعث این عمل می شود.

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

نکته: اگر شما مایلید که صفحه ی دسته های (Category) وبلاگ تان نیز با صفحه ی اصلی سایت شما متفاوت باشد، یک فایل بنام category.php ساخته و آنرا آنطور که مایلید تنظیم کنید.

• مرحله ی دوم:

» یک فایل بنام search.php بسازید.
» هر آنچه که در فایل archive.php وجود دارد را کپی کرده و درون فایل search.php بچسبانید.
» تغییرات را save کنید.

با انجام این عمل تمامی نتایج جستجوی وبلاگ نیز بصورت گلچین نمایش داده خواهید بود.

◊ حال شاید این سوال برای شما پیش آید که اگر فایل search.php یا archive.php وجود نداشت، صفحه ی جستجوی وبلاگ یا بخش آرشیو وبلاگ چگونه نمایش داده می شد؟
باید در جواب گفت که اگر فایلهای search.php یا archive.php وجود نداشته باشند، آنگاه وردپرس بصورت هوشمندانه نحوه ی نمایش تمامی این صفحات را از فایل index.php می گیرد.

• مرحله ی سوم:

» دو فایل با نام های page.php و single.php بسازید.
» تمامی کدهای موجود در فایل index.php را درون فایلهای single.php و page.php کپی کنید. (الان باید فایلهای Page و single مانند هم باشند.)
» تغییرات را در فایل page و single ثبت کرده و فایل index.php و فایل single.php را ببیندید.

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

فایل page.php در مورد نحوه ی نمایش برگه های وبلاگ شما وارد عمل می شود. حال برای بهتر شدن آن مراحل زیر را پی بگیرید.

۱- در فایل page.php در زیر کد <?php the_content(); ?> کدهای زیر را تایپ کنید:

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

2- کدهای postmetadata از page.php پاک کنید. چون اطلاعات postmetadata در برگه های وردپرس بی معنی هستند.

۳- کدهای posts_nav_link() یا navigation را نیز در فایل page.php پاک کنید.

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

که ظاهر آن برای مجزا کردن در حالت ویرایش وردپرس به مانند عکس زیر می باشد:

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

دومین خط تایپ شده به مدیر وبلاگ یک لینک بنام Edit می دهد تا در صورت تمایل بتوانید با کلیک بروی آن به بخش مدیریت وردپرس رفته و مستقیماً متن مورد نظر خود را ویرایش کند. در حقیقت این دکمه برای سهولت دسترسی به ویرایش برگه ها می باشد.

تغییرات را ثبت کرده و فایل page.php را ببیندید.

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

اما تنها یک فایل دیگر مانده و آن هم single.php است. فایل single.php مربوط به نحوه ی نمایش صفحه ی اصلی مطالب است یعنی زمانی که شما بروی لینک ادامه مطلب کلیک می کنید و صفحه ی اصلی مطلب گشوده می شود و در آن صفحه قادر هستید که کامنت نیز بگذارید. (شما الان که در حال خواندن این مطلب هستید دقیقاً درون صفحه ی single.php قرار دارید.)

۱- درون فایل single.php در پایین کد <?php the_content() ?> کد زیر را تایپ کنید:

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

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

۲- در بخش postmetadata، تابع <?php comments_popup_link(); ?> و همچنین تگ <br /> قبل از آن را پاک کنید. ولی کل بخش postmetadata را پاک نکنید. و دلیل پاک شدن تگ br نیز این است که یک فاصله ی اضافی را بوجود می آورد که اضافی است.

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

۳- بجای کد <?php posts_nav_link(); ?> عبارت زیر جایگزین کنید:

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

در صفحه ی اصلی، صفحه ی آرشیو، صفحه ی دسته ها و صفحه ی جستجو ، شما از تابع posts_nav_link() استفاده می کنید تا لینک های Next page و Previous page را صدا بزنید. اما برای صفحه ی single چون لینک های Next page و Previous page وجود ندارند. شما از تابع های previous_post_link() و next_post_link() استفاده کردید تا لینک پست های بعدی و قبلی را صدا بزنید.

تغییرات را در فایل single.php ثبت کنید و آنها را در مروگر مشاهده کنید.

◊ خلاصه درس:

» شما  ۴ فایل با نام های  archive.php و search.php و page.php و single.php ساختید.
» فایلهای archive.php و search.php دقیقاً یکسان هستند.
» بخش های اضافی را از فایل page.php حذف کردیم.
» بخش های اضافی را از فایل single.php حذف کردیم.

مطالب مرتبط

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

Write a quick comment | View 11 more comment(s).

درس امروز ما کوتاه خواهد بود و در آن به نحوه ی ایجاد فوتر و مهم تر از آن تقسیم بندی فایل 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 | View 9 more comment(s).

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

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

مثل همیشه شما بایستی 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 | View 2 more comment(s).

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

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

در این درس شما به فایل 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 | View 13 more comment(s).

ویژگیهای اصلی این قالب:
- پهنای ۹۰۰ پیکسلی
- سه ستونه
- دو سایدبار با قابلیت ویجیت
- هدر قابل تعویض

برای تعوض هدر این قالب باید مراحل زیر را طی کنید:

۱- عکس مورد نظر خود را به سایز ۲۵۰ در ۱۵۵ پیکسل تهیه کنید.
۲- قالب پرشیا (Persia) را فعال کنید.
۳- در بخش نمایش بروی عنوان تصویر سربرگ دلخواه کلیک کنید. مانند عکس زیر:

۴- بعد از باز شدن صفحه بروی دکمه ی Browse.. کلیک کنید و عکس مورد نظر خود را وارد نمایید. در پایان نیز بروی دکمه ی فرستادن کلیک کنید.

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

این قالب را هم برای دانلود و هم برای پیش نمایش می گذارم. به شدت منتظر نظرات شما برای بهبود و رفع ایرادات این قالب هستم….

دانلود و پیش نمایش قالب (لینک غیر مستقیم)

مطالب مرتبط

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

Write a quick comment | View 9 more comment(s).