نحوه افزودن دستورالعمل های راهنمای ابزار در مضامین وردپرس

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

نتیجه نهایی h4>

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

Tooltip Testimonials in WordPress

پیشینه: h4>

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

بزرگترین مسئله این بود که آنها به سادگی این ویژگی را در الگوی خود کدگذاری کردند. اگرچه این برای ما توسعه دهندگان خوب است ، اما اگر وب سایت را به مشتری بسپارید راه حل ایده آلی نیست؟ ما می خواستیم راه حلی داشته باشیم که در آن به مشتری توانایی اضافه یا حذف توصیفات را به اختیار خود بدهیم. به همین دلیل ، ما تصمیم گرفتیم از انواع پست سفارشی و فیلدهای متا برای تحقق این امر همراه با jQuery استفاده کنیم.

انواع پست سفارشی و جعبه های متا h4>

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

  • عکس کاربر (تصاویر کوچک) را اضافه کنید
  • نام کاربر (عنوان پست) را اضافه کنید
  • متن توصیفی (متن ارسال) را اضافه کنید
  • موقعیت مشتری در شرکت (زمینه سفارشی یا Meta Box)

اولین کاری که ما انجام دادیم این بود که یک نوع پست سفارشی به نام Testimonials اضافه کنیم که به غیر از یک زمینه (موقعیت مشتری / شرکت) همه چیز را به ما تحویل می دهد. این شما هستید که می خواهید یک جعبه متا سفارشی اضافه کنید یا مشتری خود را به استفاده از قسمتهای سفارشی بسپارید. ما می گوییم بگذارید تنبل نباشیم ، و حتی اگر به اضافه کردن چند خط کد اضافی نیاز داشته باشد ، یک تجربه عالی برای بازگشت به مشتریان خود ارائه می دهیم.

تمام کاری که شما باید انجام دهید این است که کد زیر را بگیرید و آن را در یک فایل خالی php به نام tooltip-testimonials.php یا هر نام دیگری ذخیره کنید.

 _x ('توصيه ها' ، 'توصيه ها') ،
        'singular_name' => _x ('توصیف نامه' ، 'توصیف نامه') ،
        'add_new' => _x ("افزودن جدید" ، "توصیف نامه") ،
        'add_new_item' => _x ("افزودن توصیف نامه جدید" ، "توصیف نامه") ،
        'edit_item' => _x ('ویرایش توصیف نامه' ، 'توصیف نامه') ،
        'new_item' => _x ("توصیف نامه جدید" ، "توصیف نامه") ،
        'view_item' => _x ("مشاهده توصیف نامه" ، "توصیف نامه") ،
        'search_items' => _x ('جستجوی توصیفات' ، 'توصیف نامه') ،
        'not_found' => _x ('هیچگونه توصیفی یافت نشد'، 'توصیف نامه')،
        'not_found_in_trash' => _x ("هیچ توصیفی در سطل زباله یافت نشد" ، "توصیف نامه") ،
        'parent_item_colon' => _x ("توصيه والدين:" ، "توصيه نامه") ،
        'menu_name' => _x ('توصيه ها' ، 'توصيه ها') ،
    )

    $ args = آرایه (
        'labels' => $ برچسب ،
        'hierarchical' => false ،
        
        'پشتیبانی' => آرایه ('عنوان' ، 'ویرایشگر' ، 'گزیده' ، 'نویسنده' ، 'تصویر بند انگشتی' ، 'زمینه های سفارشی' ، 'بازنگری') ،
        
        'public' => درست است
        'show_ui' => درست است ،
        'show_in_menu' => درست است ،
        'show_in_nav_menus' => درست است ،
        'publicly_queryable' => درست است ،
        'remove_from_search' => نادرست ،
        'has_archive' => درست است
        'query_var' => درست است
        'can_export' => درست است
        'rewrite' => true ،
        'capability_type' => 'پست'
    )

    Register_post_type ('توصیف نامه' ، $ args)؛
}

// جعبه متا سفارشی

$ key = "گواهی"؛
$ meta_boxes = آرایه (
"Position" => آرایه (
"name" => "موقعیت" ،
"title" => "موقعیت و شرکت" ،
"description" => "موقعیت و نام شرکت آنها را وارد کنید.")
)
 
تابع create_meta_box () {
کلید جهانی $؛
 
if (function_exists ('add_meta_box'))) {
add_meta_box ('new-meta-boxes'، ucfirst ($ key). 'Information'، 'display_meta_box'، 'testimonial'، 'normal'، 'high')؛
}
}
 
عملکرد display_meta_box () {
$ post جهانی ، $ meta_boxes ، $ key؛
؟>
 
ID ، $ key ، true) ؛ ؟>

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

  • افزودن عکس کاربر (تصاویر کوچک / تصویر ویژه). ما تنظیم کرده ایم تا اندازه آن 96 96 96 پیکسل باشد. همیشه بهتر است که از این نسبت پیروی کنید.
  • نام کاربر (عنوان پست) را اضافه کنید
  • متن توصیفی (متن ارسال) را اضافه کنید
  • موقعیت مشتری در شرکت (در جعبه Meta اطلاعات توصیفی)

نمایش در قالب h4>

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

  • یک کد jQuery سفارشی در طرح زمینه اضافه کنید.
  • یک حلقه سفارشی ایجاد کنید که توصیفات را در ساختاری که می خواهیم نمایش دهد.
  • برخی از CSS های اساسی را اضافه کنید تا زیبا به نظر برسد

اولین کاری که باید انجام دهید این است که کد jQuery زیر را کپی و پیست کنید و آن را در یک پرونده خالی به نام tooltip-testimonials.js ذخیره کنید:

jQuery (سند). آماده (تابع () {
     
    jQuery ("# ​​توصیفات img [عنوان]"). راهنمای ابزار ({
 
       // موقعیت را نیشگون بگیرید
       جبران: [0 ، 0] ،
     
       // از اثر "اسلاید" استفاده کنید
       اثر: "اسلاید"
     
    // افزودن پلاگین پویا با پیکربندی اختیاری برای لبه پایین
    }). پویا ({پایین: {جهت: 'پایین' ، گزاف گویی: درست}})؛
     
})

پس از انجام این کار ، باید این پرونده را در عنوان طرح زمینه خود بارگیری کنیم. شما می توانید با ویرایش فایل header.php و چسباندن کد اسکریپت در ناحیه سر خود انتخاب کنید که این کار را به صورت دستی انجام دهید ، یا بهترین روش WP را دنبال کنید و از عملکرد wp_enqueue_script استفاده کنید. بیایید ادامه دهیم و فایل tooltip-testimonials.js خود را در پوشه اسکریپت های قالب خود بارگذاری کنیم. اگر وجود ندارد ، فقط پوشه ای به نام اسکریپت ایجاد کنید.

کد زیر را به پرونده functions.php طرح زمینه خود اضافه کنید:

add_action ('wp_enqueue_scriptts'، 'tooltip_enqueue_scriptts')؛
تابع tooltip_enqueue_script () {
if (! is_admin ()) {
    wp_register_script ('jquery_tools'، 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js؟ver=3.4.2'، 'jquery'، '3.4.2'، true) ؛
        wp_enqueue_script ('jquery_tools')؛
 
    wp_register_script ('tooltip'، get_stylesheet_directory_uri (). '/scripts/tooltip-testimonials.js'، 'jquery'، '1'، true)؛
        wp_enqueue_script ('راهنمای ابزار')؛
}
}

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



'توصیف نامه' ، 'posts_per_page' => 6)؛ $ loop = WP_Query جدید ($ args) ؛ if ($ loop-> have_posts ()): while ($ loop-> have_posts ()): $ loop-> the_post ()؛ $ data = get_post_meta ($ loop-> post-> ID ، "توصیفی" ، درست)؛ $ user_image_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ loop-> post-> ID) ، 'testimonial-thumb')؛ ؟>

" title="" alt=" ">

کد حلقه فوق 6 مورد را در صفحه نمایش می دهد. می توانید به هر شکلی که انتخاب کنید به آنها سبک دهید. اگر حدوداً 20 گواهی نامه داشته باشید ، می توانید سفارش سفارش = رند را نیز اضافه کنید. شما می توانید به صورت تصادفی 6 نمایش داده شود.

حالا بیایید چند سبک CSS اضافه کنیم تا زیبا به نظر برسد. در زیر چند نمونه CSS آورده شده است که ما استفاده کردیم. احتمالاً لازم است که آن را بر اساس سبک های زمینه ، طرح های رنگی و غیره تنظیم کنید.

#testimonials .testimonials {width: 116px؛ شناور به سمت چپ؛ حاشیه: 35px 30px 0 0؛}

#testimonials .center {text-align: center؛ حاشیه: 0px 0 15px ؛؛ بالشتک: 0px؛}

#testimonials .center img {box-shadow: 0px 2px 2px # d2d2d2؛ -moz-box-shadow: 0px 2px 2px # d2d2d2؛ -webkit-box-shadow: 0px 2px 2px # d2d2d2؛ حاشیه: 3px solid #fff؛}

#testimonials .testimonials-title {font-size: 14px؛ وزن قلم: 700؛ text-align: مرکز؛ حاشیه: 3px 0 0؛ بالشتک: 0px؛}

#testimonials .company {font-size: 12px؛ نوع قلم: مورب؛ text-align: مرکز؛ حاشیه: 0px؛ بالشتک: 0px؛}

#testimonials .tooltip {پس زمینه: # 111؛ رنگ: #fff؛ عرض: 200 پیکسل بالشتک: 20px؛ حاشیه: 0 5px 20px؛}

جمع بندی: h4>

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

اگر س anyال یا پیشنهادی دارید ، در صورت تمایل می توانید در زیر نظر دهید.

منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-tooltip-testimonials-in-wordpress-themes/.

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