اضافه کردن استایل دلخواه خود از طریق سفارشی سازی بدون افزودن CSS به صفحه

ضعیفمتوسطخوببسیار خوبعالی
( 0 رای , میانگین : 0,00 از 5)
بارگذاری...

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

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

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

در این مقاله میخواهیم به شما آموزش دهیم که چگونه می توانید از ترکیب PHP و فایل استایل قالب استفاده کرده و از این بروز این مشکل جلوگیری کنید و مطمئن شوید که که کدهای استایل اضافه شده در قسمت سفارشی سازی به فایل استایل قالب اضافه شده اند نه به قسمت head صفحه.

 

به چه چیزهایی نیاز خواهید داشت

برای اینکه بتوانید این کار را انجام دهید، به موارد زیر نیاز خواهید داشت:

  • وردپرس
  • قالبی که میخواهید آن را ویرایش کرده و قابلیت سفارشی سازی را به آن اضافه کنید.
  • ویرایشگر کد

توجه: این روش با یک سری طرح رنگ های محدود کار می کند، اما اگر میخواهید به کاربرانتان امکان انتخاب هر رنگی را بدهید باید از یک color picker استفاده کنید.

 

تنظیم قالب

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

برای این کار پوشه ای به نام includes در پوشه قالب خود ایجاد کرده و در پوشه مذکور فایلی به نام customizer.php ایجاد کنید.

سپس کد زیر را درون فایل functions.php قالب خود قرار دهید:

include( get_stylesheet_directory() . '/includes/customizer.php' );

 

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

 

تنظیم سفارشی سازی

فایل customizer.php را باز کنید. اول از همه شما باید تابعی ایجاد کنید تا تنظیمات سفارشی سازی را در خود ذخیره کند. برای این کد را کد زیر را اضافه کنید:

<?php
function wpmu_customize_register( $wp_customize ) {
}
add_action( 'customize_register', 'wpmu_customize_register' );

 

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

 

اضافه کردن بخش سفارشی سازی

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

درون تابعی که پیشتر آن را به فایل customizer.php اضافه کردید، کد زیر را اضافه کنید:

/*******************************************
Section
********************************************/
	
// colors section
$wp_customize->add_section( 'wpmu_colors' , array(
	'title' => __( 'Colors', 'wpmu')
) );

 

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

 

اضافه کردن تنظیمات به سفارشی سازی

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

حالا درون تابع مذکور و زیر کد مربوط به بخش سفارشی سازی، کد زیر را اضافه کنید:

/*******************************************
Color settings
********************************************/

//logo position
$wp_customize->add_setting( 'wpmu_nav_color' );
$wp_customize->add_control( 'wpmu_nav_color', array (
	'label' => 'Navigation Menu Color',
	'section' => 'wpmu_colors',
	'settings' => 'wpmu_header_color',
	'type' => 'radio',
	'choices' => array(
		'blue' => __( 'Blue', 'wpmu' ),
		'red' => __( 'Red', 'wpmu' ),
		'green' => __( 'Green', 'wpmu' ),
	)
));

 

برای اینکه با کد بالا بیشتر آشنا شویم، بهتر است نگاهی جزئی تر به آن بیاندازیم:

  • ابتدا این کد بخش تنظیمات با عنوان wpmu_nav_color را ایجاد می کند تا تمام ورودی های کاربر را ذخیره کند.
  • سپس بخش کنترلی را تحت عنوان wpmu_nav_color اضافه می کند که امکان استفاده از پارامترها فراهم می کند.
  • برچسبی اضافه می کند، چیزی که کاربران آن را خواهد دید.
  • این برچسب مشخص می کند که کنترل در کدام بخش ظاهر می شود.
  • این کد به وردپرس می گوید کدام تنظیمات ذخیره خواهند شد.
  • برای این کار از دکمه های رادیویی استفاده می کند.
  • و گزینه های مد نظر را با استفاده از این دکمه های رادیویی ایجاد می کند. دکمه هایی نظیر red، blue و green.

حالا تابع wpmu_customize_register() شما کامل شده است. فایل مذکور را ذخیره کرده و سفارشی سازی را باز کنید. حالا می توانید بخش جدید و کنترل مربوط به آن را مشاهده کنید:

پنل سفارشی سازی ایجاد شده

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

 

فراخوانی تنظیمات از طریق یک فیلتر هوک

به جای اضافه کردن استایل در head صفحه، باید آن را به المان دیگری در قالب منتقل کنیم.

اضافه کردن هوک فیلتر در قالب

فایل header.php مربوط به قالب خود را باز کرده و کد مربوط به منوی راهبری را پیدا کنید. برای مثال چیزی شبیه به کد زیر:

<nav class="main">
	<?php wp_nav_menu( array(
		'theme_location' => 'header-menu',
		'container_class' => 'menu'
	) ); ?>
</nav>

 

حالا باید یک فیلتر در تگ nav قرار دهید، شبیه نمونه زیر:

<nav class="main <?php echo apply_filters( 'wpmu_header_color_css', 'blue' ); ?>">
	<?php wp_nav_menu( array(
		'theme_location' => 'header-menu',
		'container_class' => 'menu'
	) ); ?>
</nav>

 

به احتمال زیاد کد شما با کد بالا فرق خواهد داشت اما شما باید فیلتر مورد نظر را در جایی قرار دهید که کلاس css را وارد می کنید. با این کار یک فیلتر هوک با محتوای پیش فرض ‘blue’ ایحاد خواهد شد و ما از آن برای اضافه کردن استایل دلخواه خود به المان مورد نظر استفاده می کنیم.

 

ارسال تنظیمات به فیلتر هوک

اما همچنان نیاز است تا تنظیمات به این فیلتر منتقل شوند و این کار باید از طریق فایل customizer.php انجام شود.

پس دوباره به فایل customizer.php برگشته و تابع جدیدی در آن ایجاد می کنیم:

function wpmu_header_color( $header_color ) {

	$header_color = get_theme_mod( 'wpmu_header_color', 'blue' );
	
	return $header_color;
		
}
add_filter( 'wpmu_header_color_css' , 'wpmu_header_color' );

 

این کد با استفاده از get_theme_mod() تنظیمات را از بخش سفارشی سازی فراخوانده و دوباره آنها را بازمیگرداند که این یعنی این تنظیمات در هدر که فیلتر هوک مورد نظر قرار دارد، نمایش داده خواهند شد. حالا کافی است تنظیمات را ذخیره کرده و فایل customizer.php را ببندید.

 

اضافه کردن استایل به قالب

گام نهایی اضافه کردن استایل ها برای کلاس css ای است که آن را با استفاده از فیلتر هوک اضافه کردیم. این استایل ها در فایل استایل قالب شما ذخیره شده و این یعنی دیگری هیچ کدی در head صفحه نمایش داده نخواهد شد.

فایل استایل قالب خود را باز کرده و چیزی شبیه به زیر را به آن اضافه کنید:

nav.main.blue
nav.main.blue a {
	background: #312d72;
}
nav.main.red,
nav.main.red a {
	background: #8b1b1b;
}
nav.main.green,
nav.main.green a {
	background: #0e4813;
}

 

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

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

طرح پیش فرض منوی راهبری

اما اگر بخواهیم می توانیم با استفاده از بخش سفارشی سازی این مقدار پیش فرض را تغییر دهیم:

انتخاب رنگ دیگر برای منوی راهبری

 

استفاده از بخش سفارشی سازی آنچنان بد هم نیست

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

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

پایان رسید

درباره نویسنده



جواد
( عضو از 6 سال قبل )
  • 168 نوشته
  • 34 دیدگاه
  • 0 محصول
  • 0 دوره آموزشی
جواد - عضو تیم تحریریه مجموعه نوین وردپرس...

نظرات کاربران

ثبت دیدگاه

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

دیدگاهتان را بنویسید

مطالب مرتبط



برنامه زمپ XAMPP چیست + آموزش زمپ سرور

38
0
راه اندازی یک محیط میزبانی محلی یک گام مهم در هر پروژه توسعه وردپرس محسوب می شود. انجام اینکار به شما کمک می کند تا خیلی ساده ویژگی ...
جزییات بیشتر آموزش را بخوانید!

ووکامرس یا پرستاشاپ؟ WooCommerce بهتر است یا PrestaShop؟

91
0
راه‌اندازی فروشگاه اینترنتی با استفاده از ابزارهایی همچون ووکامرس و پرستاشاپ بسیار ساده و لذت‌بخش است. اما اینکه کدامیک از اینها عملکرد بهتری دارند ممکن است برای بسیاری ...
جزییات بیشتر آموزش را بخوانید!

هدایت کاربران به یک صفحه خاص پس از درج دیدگاه

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

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

2192
3
جلوگیری از ثبت نام کاربران با ایمیل های موقت ایمیل های موقت سلام به دنیا ی وردپرس :) کاربران عزیز شما حتما با سرویس های ایمیل تقلبی که به شما به ...
جزییات بیشتر آموزش را بخوانید!

آموزش افزونه Booknetic؛ تنظیمات، نصب و کار با افزونه بوکنتیک برای رزرو و نوبت دهی

303
0
اگر قصد دارید یک وب‌سایت رزرو و نوبت دهی برای کلاس های آموزشی، پزشکان، آرایشگاه، وکلا و... راه‌اندازی کنید که کاربران بتوانند برای دریافت خدمات از شما ابتدا ...
جزییات بیشتر آموزش را بخوانید!

از چه تعداد لینک داخلی در یک صفحه استفاده کنیم؟

1195
0
سلام دوستان؛ از آنجایی که لینک ها یکی از موارد حائز اهمیت در تحلیل سئو برای موتور های جستجو هستند، لازم است بدانیم که گوگل و سایر موتور های ...
جزییات بیشتر آموزش را بخوانید!

بهترین افزونه محصول متغیر ووکامرس | چگونه به محصولات ووکامرس چند قیمت و چند ویژگی اضافه کنیم؟

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

سیستم آپدیت خودکار محصولات نوین وردپرس راه اندازی شد…

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

دسته بندی مطالب

محصولات حرفه ای

جستجو کنید…

همکار ما شوید

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

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