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

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

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

 

 

blockquote (1)

 

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

 

 

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

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 قرار بدین

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

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

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

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



  • 212 بازدید
  • بهنام نجاتی
  • 16 آوریل 2016

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

نظرات بسته
اگر نياز به پشتيباني داريد همين حالا با ما تماس بگيريد . تيم پشتيباني رهجو نت بصورت 24 ساعته در خدمت شماست...