طراحی سایت و نکات مربوط به آن

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

قدم اولیه: ساخت یک ابزارک برای اکران در هدر


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

1
2
3
4
5
6
7
8
9
10
11
12
13
function wpb_widgets_init() {

register_sidebar( array(
\"name\" => \"Custom Header Widget Area\",
\"id\" => \"custom-header-widget\",
\"before_widget\" => \"
\",
\"after_widget\" => \"
\",
\"before_title\" => \"
\",
\"after_title\" => \"
\",
) );

}
add_action( \"widgets_init\", \"wpb_widgets_init\" );
پس از افزودن کد متبوع ، در نصیب اکران / ابزارک ها مورد ای به اسم custom header widget تولید خواهد شد در‌این بخش هر چیزی را بنویسید در هدر سایت شما اکران داده گردد.

به‌دنبال بخوانید: تولید تصویر شاخص پیش فرض برای پست های وبسایت در وردپرس






قدم دوم : اکران ابزارک متبوع در هدر


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

در‌این مرحله شما بایستی کدهای پایین را در فولدر header.php قرار دهید:

1
2
3
4
5
6
7
8

if ( is_active_sidebar( \"custom-header-widget\" ) ) : ?>





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





قدم سوم : استایل دهی به محتوای با به کارگیری از کدهای css


در‌این مرحله نیاز میباشد که از کدهای css سفارشی به کار گیری فرمائید هم اکنون این کدها را می بایست در کدام بخش قرار دهید؟ در حالتی‌که از قالب بدون پول استعمال می‌کنید در نصیب Appearance / Customize page می توانید کد متبوع را قرار داده و دستکاری فرمائید البته در شرایطی‌که از قالب پرمیوم به کار گیری می کنید به نصیب تنظیمت قالب رفته و در نصیب css سفارشی کد متبوع را قرار دهید.

در بعضا از قالب ها جایی برای قرار دادن کدهای سفارشی وجود دارااست و برای حل این قضیه می‌توانید از پلاگین Simple Custom CSS به کارگیری کرده یا این که در درون هاست یک پوشه با اسم rtl.css ساخت و ساز کرده و کدها را در آن جا اسکن نمایید. راه و روش سهل وآسان برای شما استعمال از پلاگین است.

درپی بخوانید: فراگیری نصب وردپرس روی Mac با به کار گیری از MAMP




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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#header-widget-area {
width: 100%;
background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
text-align: center;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}




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