كيفية إضافة تأثير تبديل البحث في ووردبريس

هل رأيت أيقونة البحث مع تأثير التبديل على العديد من المواقع الشعبية؟ ألقِ نظرة على مشروعنا الشقيق List25 كمثال. تكمن الفكرة في عرض أيقونة بحث بسيطة ، وعندما ينقر المستخدم عليها ، تنزلق نماذج البحث إلى الخارج المعروفة أيضًا باسم تأثير التبديل. إنه تأثير أنيق يوفر أيضًا مساحة ويسمح للمستخدمين بالتركيز على المحتوى. ناهيك عن أن هذا أمر رائع للموضوعات المستجيبة للجوال . في هذه المقالة ، سنوضح لك كيفية إضافة تأثير تبديل البحث في  ووردبريس Themes.

بحث تأثير تبديل في العمل

ملاحظة: هذا البرنامج التعليمي مخصص للمستخدمين المتوسطين الذين لديهم معرفة عملية بعلامات قوالب  ووردبريس و HTML و CSS. يُنصح المستخدمون من مستوى المبتدئين بالتدرب على الخادم المحلي أولاً.

عرض نموذج بحث ووردبريس

يضيف  ووردبريس فئات CSS الافتراضية إلى HTML التي تم إنشاؤها بواسطة علامات قوالب مختلفة داخل قالب. تستخدم سمات  ووردبريس <?php get_search_form(); ?>علامة القالب لعرض نموذج البحث. يمكنه إخراج نموذجي بحث مختلفين ، أحدهما لموضوعات HTML4 والآخر للموضوعات التي تدعم HTML5. إذا كان المظهر الخاص بك يحتوي على add_theme_support(‘html5’, array(‘search-form’))سطر في ملف function.php ، فإن علامة القالب هذه ستخرج نموذج بحث HTML5. خلاف ذلك ، سيتم إخراج نموذج بحث HTML4.

هناك طريقة أخرى لمعرفة الشكل الذي يولده القالب الخاص بك ، وهي إلقاء نظرة على الكود المصدري لنموذج البحث.

هذا هو نموذج get_search_form () الذي سيتم عرض علامة النموذج عندما لا يحتوي نسقك على دعم HTML5:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

وهذا هو الشكل الذي ستنشئه لموضوع بدعم HTML5.

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

من أجل هذا البرنامج التعليمي ، سنستخدم نموذج بحث HTML5. إذا كان المظهر الخاص بك يولد نموذج بحث HTML4 ، فقم بإضافة هذا السطر من التعليمات البرمجية في ملف jobs.php الخاص بالقالب:

add_theme_support('html5', array('search-form'));

بمجرد التأكد من أن نموذج البحث الخاص بك يقوم بإنشاء نموذج HTML5 ، فإن الخطوة التالية هي وضع نموذج البحث في المكان الذي تريد عرضه فيه مع تأثير التبديل.

إضافة تأثير التبديل إلى نموذج البحث في  ووردبريس

أول شيء ستحتاجه هو رمز البحث. يأتي موضوع Twenty Thirteen الافتراضي في  ووردبريس برمز صغير لطيف للغاية ، وسنستخدمه في برنامجنا التعليمي. ومع ذلك ، لا تتردد في إنشاء ملف خاص بك في Photoshop أو تنزيله من الويب. فقط تأكد من أن الملف يسمى search-icon.png.

أنت الآن بحاجة إلى تحميل رمز البحث هذا إلى مجلد صور المظهر الخاص بك. اتصل بموقعك على الويب باستخدام عميل FTP مثل Filezilla وافتح دليل السمات الخاص بك.

الآن هذه هي الخطوة الأخيرة والأكثر أهمية. تحتاج إلى إضافة CSS هذا إلى ورقة أنماط القالب الخاص بك:

.site-header .search-form {
    position: absolute;
    right: 200px;
    top: 200px;
}
 
.site-header .search-field {
    background-color: transparent;
    background-image: url(images/search-icon.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}
 
.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit { 
display:none;
}

الشيء المهم الذي يجب ملاحظته حول CSS هو تأثيرات انتقال CSS3 التي تتيح لنا إنشاء تأثير التبديل بسهولة. لاحظ أيضًا أنه لا يزال يتعين عليك ضبط موضع رمز البحث والنموذج وفقًا لتخطيط المظهر الخاص بك.

نأمل أن تساعدك هذه المقالة في إضافة تأثير تبديل البحث في قالب  ووردبريس الخاص بك. ما هي أفكارك حول نموذج البحث البديل؟ نرى المزيد والمزيد من المواقع التي تستخدم هذا التأثير. اترك ملاحظاتك وأسئلتك في التعليقات أدناه أو انضم إلينا في المحادثة على Google+ .

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..