افزودن قابلیت ابزارک به پوسته های وردپرس

daskhatmin فواد طهماسبی
11,765 بازدید
افزودن قابلیت ابزارک به پوسته های وردپرس

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

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

۱- اضافه کردن کد زیر در فایل functions.php مربوط به پوسته وردپرس:

if (function_exists('register_sidebar')) {
register_sidebar(array(
        'name'          => 'Right Sidebar',
        'id'            => "right_sidebar",
        'description'   => 'Under Search Form',
        'before_widget' => '<aside class="widget %2$s">',
        'after_widget'  => "</aside>",
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => "</h4>"
));
register_sidebar(array(
		'name'=> 'Left Sidebar',
		'id' => 'left_sidebar',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));

توضیح کد بالا:  در کد بالا دو ناحیه با نامها و شناسه های مختلف یکی با نام “Right Sidebar” و دیگری با نام “Left Sidebar” در پوسته تعریف میکنیم. توجه داشته باشید که هنگام تعریف ناحیه اول (right_sidebar) تگهای استفاده شده در پوسته ی مربوط به سایدبار راست، به صورت زیر است:

<aside class="widget widget_tags">
    <h4 class="widget-title">برچسبهای محبوب</h4>
    <ul>
        <li>...</li>	
        <li>...</li>
        <li>...</li>			
    </ul>
</aside>

و کد Html مربوط به سایدبار چپ به صورت زیر است:

<li class="widget widget_tags">
    <h2 class="widget-title">برچسبهای محبوب</h4>
    <ul>
        <li>...</li>	
        <li>...</li>
        <li>...</li>			
    </ul>
</li>

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

۲- اضافه کردن کد زیر در سایدبار راست:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar')) : ?>
<?php endif; ?>

۳- اضافه کردن کد زیر در سایدبار چپ:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('left Sidebar')) : ?>
<?php endif; ?>

همین! به این سادگی میشه کاری کرد که پوسته وردپرس از ابزارک پشتیبانی کنه.

daskhatmin

فواد طهماسبی

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

20 دیدگاه برای “افزودن قابلیت ابزارک به پوسته های وردپرس”

  1. رویا گفت:

    سلام. ساید بار وردپرس چطور راستچین کنم؟ ( الان سمت چپ سایت است میخواهم به راست منتقل کنم)

  2. رها گفت:

    سلام اقای طهماسبی
    یه سوال خیلی مهم و خواهش میکنم هر راه حلی که دارید راهنمایی کنید
    من دو تا تم دارم در تم اولی چند ویجیت هست که خیلی جالبن ولی خود تم زیاد باحال نیست
    حالا میخوام تم دوم را استفاده کنم اما اون چند تا ویجیت باحال که در تم اول هستند را به تم دوم اضافه کنم (transfer)
    ویجیت ها از خود تم اول هستند نه افزونه های جداگانه
    در صورت امکان راهنمایی کنید من چطور دو تا ویجیت را از تم اولی به تم دومی ببرم
    با سپاس و ارزوی توفیق
    شاد باشید

    1. فؤاد طهماسبی گفت:

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

      /**
       * Text widget class
       *
       * @since 2.8.0
       */
      class WP_Widget_Text extends WP_Widget {
      
      	function __construct() {
      		$widget_ops = array('classname' => 'widget_text', 'description' => __('Arbitrary text or HTML.'));
      		$control_ops = array('width' => 400, 'height' => 350);
      		parent::__construct('text', __('Text'), $widget_ops, $control_ops);
      	}
      
      	function widget( $args, $instance ) {
      		extract($args);
      
      		/** This filter is documented in wp-includes/default-widgets.php */
      		$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
      
      		/**
      		 * Filter the content of the Text widget.
      		 *
      		 * @since 2.3.0
      		 *
      		 * @param string    $widget_text The widget content.
      		 * @param WP_Widget $instance    WP_Widget instance.
      		 */
      		$text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );
      		echo $before_widget;
      		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
      			
      < ?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?>
      < ?php echo $after_widget; } function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); if ( current_user_can('unfiltered_html') ) $instance['text'] = $new_instance['text']; else $instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed $instance['filter'] = isset($new_instance['filter']); return $instance; } function form( $instance ) { $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) ); $title = strip_tags($instance['title']); $text = esc_textarea($instance['text']); ?>

      /> 

      < ?php } }

      ویجتهای شما با کدی شبیه به این نوشته شدن، حالا این کد یا مستقیما توی فایل functıon هست و یا در فایل دیگری نوشته شده و اونجا ınclude میشه.
      به عبارت extends WP_Widget در ایجاد کلاس دقت کنید.

  3. mobini گفت:

    میشه id شما را داشته باشم تا سریعتر جلو برم

    1. فؤاد طهماسبی گفت:

      دوست عزیز، ایمیل شما نمیدونم چه مشکلی داره که not delivery میده.
      tahmasebi.f [at] gmail.com

  4. mobini گفت:

    با عرض ادب
    من کد function.php را در function.php را نوشتم
    .تابع های مرحله ۳ را در index.php نوشتم
    اما نمی دانم کدهای html را کجا بنویسیم؟

  5. mobini گفت:

    من تمام مراحلو رفتم ابزارک کار نکرد؟

    1. فؤاد طهماسبی گفت:

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

  6. mobini گفت:

    سلام ممنون از راهنمایی شما.(از این به بعد فارسی تایپ میکنم).امروز کارم رو از http://codex.wordpress.org/Theme_Development شروع میکنم .بازهم مزاحم شما خواهم شد.

  7. mobini گفت:

    salam va arze adab
    man dar hale tabdil html be wp hastam
    mishe rahnamim konid az che manbaye baraye anjam harche behtar karam estefade konam
    marahel karam chie?

    1. فؤاد طهماسبی گفت:

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

      به نظر من بهتره از اینجا شروع کنید:
      http://codex.wordpress.org/Theme_Development

      ( اگر براتون مقدور هست فارسی تایپ کنید 🙂 )

  8. حمید گفت:

    با سلام ببخشین من این کدو گذاشتم نو فانیکشین الان همه جای سایتم دیده هم تو پنل هم نو صفحات دیگر مشکل چیسست در ضمن ابزارکمم فعال نشده ?
    منتظرتونم

    1. فؤاد طهماسبی گفت:

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

  9. احسان گفت:

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

    1. فؤاد طهماسبی گفت:

      سلام،
      میتونید با قرار دادن تصویر یا دادن لینک یا سورس کد مورد نظر در انجمن، مشکلاتتون رو مطرح کنید:
      http://ask.daskhat.ir/forum/7/view/
      منم هستم، کمک میکنم.

  10. علی گفت:

    مطلب فوق اعاده خوبی بود!!! واقعا به کارم اومد! ممنون!

دیدگاه‌های بیشتر

کد HTMLCSSJavaScriptPHP