WordPress mövzularında vasitələr haqqında məlumatların ifadələrini necə əlavə etmək olar

Keçmişdə, WordPress-də fırlanan ifadələri necə əlavə edəcəyinizi sizə göstərdik. WPBeginner’in WordPress videoları üçün yeni bir ana səhifəsi yaratmaqla, StudioPress’in bir müddətdir gördüyümüzdən ilham aldıq. Istifadəçi bir fotoşəkili aşırtdığı zaman ifadələri bir göstərişdə göstərir. Bu texnika bir sənaye standartına çevrilir, çünki digər insanların da istifadə etdiyini gördük. Bu yazıda WordPress-də tooltip pop-upları necə əlavə edəcəyinizi sizə göstərəcəyik.

Yekun hesab

Son məhsulun görünəcəyi budur. Siçanınızı bir insanın fotoşəkili üzərində apararsanız, bir göstəriş yazısı göstərilir. Canlı demonu burada görə bilərsiniz. Bununla birlikdə, bu məqalə canlı nümayişdən yəqin ki, sağ qalacaq, buna görə aşağıda bir ekran görüntüsü əlavə etdim:

WordPress-də alətlər haqqında məlumatların ifadələri

Fon:

Sənayenin mütəxəssislərindən eşitdiklərimizə əsaslanaraq, görkəmli insan simalarını göstərərək səhifəyə şəxsi hisslər qatmağa meyllidir. Bu marşrutla getmək istəməyimizin səbəbi budur. Loren Nasonun məqaləsini tapmaq üçün sadə bir Google axtarışını etdik. Əsasən StudioPress-in istifadə etdiyi kodu vurğuladı. StudioPress-in ən yaxşı hissəsi dəstəkdir. Loren təsvir etdiyi kimi, Brian Gardner’in saytındakı ifadələri necə yaratdığını soruşduqda, Brian sadəcə bir nümunə sənədini təqdim etdi.

Ən böyük problem, sadəcə funksiyanı şablonlarına kodlaşdırması idi. Bu, bizim üçün inkişaf etdiricilərimiz üçün yaxşı bir iş olsa da, veb saytı bir müştəriyə təhvil verdiyiniz təqdirdə ideal bir həll deyilmi? Müştəriyə istədiyi ifadələri əlavə etmək / silmək imkanı verən bir həll yolunu istədik. Buna görə jQuery ilə birlikdə bunu həyata keçirmək üçün Xüsusi Yazı Növləri və metafildlərdən istifadə etmək qərarına gəldik.

Xüsusi yazıların və meta tablolarının növləri

Müştərinin aşağıdakıları edə bilməsi üçün ehtiyacımız var:

  • İstifadəçi şəkli əlavə edin (kiçik şəkillər)
  • İstifadəçi adı (ismin adı) əlavə edin
  • Testimonial mətn əlavə edin (mesaj orqanı)
  • Müştərinin şirkətdəki mövqeyi (xüsusi sahə və ya qapı qutusu)

İlk gördüyümüz iş, bir sahədən (müştəri / şirkət mövqeyi) başqa hər şeyi əldə edən Testimonials adlı xüsusi bir yazı növü əlavə etdi. Xüsusi bir meta qutusu əlavə etmək və ya müştərinizin xüsusi sahələrini istifadə etməyiniz sizə bağlıdır. Dedik ki, tənbəl olmayaq və müştərilərimizə bir sıra əlavə kod xətti əlavə etməyi tələb etsə də böyük bir təcrübə bəxş edək.

Bunun üçün aşağıdakı kodu götürmək və tooltip-testimonials.php və ya bu səbəbdən başqa bir adla boş bir php faylına qeyd etmək lazımdır.

Esto nos dará la configuración básica de WordPress con la que necesitamos comenzar. Ahora, debe comenzar a agregar algunos testimonios para poder mostrarlos. Recapitulemos a dónde va cada elemento.

  • İstifadəçi şəkli əlavə edin (kiçik / xüsusi şəkil). Biz onu 96 x 96px ölçüsündə tənzimlədik. Bu nisbətə əməl etmək həmişə daha yaxşıdır.
  • İstifadəçi adı (ismin adı) əlavə edin
  • Testimonial mətn əlavə edin (mesaj orqanı)
  • Müştərinin şirkətdəki mövqeyi (vəsiyyətnamə məlumatının meta qutusunda)

Mövzusunda göstər

Tooltip rəyləri ilk növbədə xüsusi mövzular üçün nəzərdə tutulmuşdur, buna görə bəli, bir az mövzu redaktə etməklə əllərinizi çirkləndirməyi tələb edəcəkdir. Hər mövzunun fərqli ölçüləri, rəng sxemləri və üslubları olduğundan, bunu bir plagin əvəzinə dərs vəsaiti kimi başlamağa qərar verdik. WordPress mövzusundakı tooltip ifadələrini göstərmək üçün nə edəcəyik:

  • Mövzusunda xüsusi jQuery kodu əlavə edin.
  • İstədiyimiz bir quruluşdakı ifadələri göstərən xüsusi bir döngə yaradın.
  • Gözəl görünmək üçün bəzi əsas CSS əlavə edin

Ediləcək ilk şey aşağıdakı jQuery kodunu kopyalayıb yapışdırıb adlanan boş bir faylda saxlamaqdır tooltip-Testimonials.js:

jQuery(document).ready(function(){
     
    jQuery("#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes").tooltip({
 
       // tweak the position
       offset: [0, 0],
     
       // use the "slide" effect
       effect: 'slide'
     
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
     
});

Bunu etdikdən sonra bu faylı mövzu başlığına yükləməliyik. Bunu header.php faylını redaktə etmək və skript kodunu başlıq sahəsinə yapışdırmaqla əl ilə etmək və ya WP ən yaxşı təcrübələrini izləmək və wp_enqueue_script funksiyasından istifadə edə bilərsiniz. Gəlin, tooltip-testimonials.js faylımızı temanın skript qovluğuna yükləyək. Əgər mövcud deyilsə, sadəcə skript adlanan bir qovluq yaradın.

Temanın funksiyaları.php faylına aşağıdakı kodu əlavə edin:

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
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('tooltip');
}
}

İndi bu yerdə olduğumuz üçün, bu alət yazıları ifadələrini istifadəçi şəkilləri ilə bir grid əsaslı bir formatda göstərməyə imkan verən xüsusi bir döngə yaradaq. Bu ifadələrin görünməsini istədiyiniz yeri açın. Sizin yan çubuğunuz, ev səhifəniz və ya istədiyiniz yerdə olsun. Sonra aşağıdakı döngəni yapışdırın:








Yuxarıdakı döngə kodu göstərəcəkdir 6 səhifədəki elementlər. İstədiyiniz kimi dizayn edə bilərsiniz. Əlavə və ya mənfi 20 şəhadətiniz varsa, orderby = rand da əlavə edə bilərsiniz. Ola bilər 6 təsadüfi göstərilir.

İndi yaraşıqlı görünmək üçün bəzi CSS üslublarını əlavə edək. Aşağıda istifadə etdiyimiz CSS nümunəsidir. Yəqin ki, onu mövzu üslublarınıza, rəng sxemlərinə və s. Əsas götürərək tənzimləməlisiniz.

#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}

#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}

#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}

#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}

#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}

#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}

Bitən:

Ümid edirik ki, bu məqalə WordPress mövzularınıza tooltip ifadələrini əlavə etməyə kömək edəcəkdir. Bu çox əsas nümunədir. Daha əvvəl qeyd etdiyimiz kimi, hər zaman wp_query arqumentlərini təsadüfi bir ifadəyə görə düzəldə bilərsiniz. Müştərilərinizə asan bir sürükləmə və açma interfeysi ilə sifarişin təyin olunmasına imkan vermək üçün Yazı Sifariş plaginini də istifadə edə bilərsiniz.

Hər hansı bir sualınız və ya təklifiniz varsa, aşağıda bir rəy bildirməkdən çekin.