تسمح التعليقات للمستخدمين بالتفاعل مع المحتوى الموجود على موقع الويب الخاص بك. هذا هو السبب في أننا نعتقد أنه من المهم أن طريقتك نسق تعليقات و شكل تعليق ، لذلك هو سهل الاستعمال وكذلك حسن المظهر. سألنا أحد المستخدمين مؤخرًا عن كيفية إضافة تلميحات أدوات jQuery إلى نموذج تعليقات ووردبريس. اعتقدنا أن الآخرين قد يجدون هذا مفيدًا أيضًا. في هذا البرنامج التعليمي ، سنوضح لك كيفية إضافة تلميحات أدوات jQuery في نموذج تعليق ووردبريس.
jQuery tooltip قيد التنفيذ في نموذج تعليق ووردبريس
تظهر تلميحات الأدوات عندما يأخذ المستخدم الماوس إلى أحد العناصر ، وعادةً ما يقدم وصفًا لهذا العنصر المحدد. في هذا البرنامج التعليمي ، سنضيف تلميحات أدوات jQuery لإظهار نصائح مثل ، يرجى استخدام اسمك الحقيقي في حقول نموذج التعليقات.
بإضافة تلميحات أدوات jQuery ، يمكنك تحسين تجربة المستخدم ، وستبدو أجمل.
أول شيء عليك القيام به هو إنشاء مجلد على سطح المكتب الخاص بك وتسميته wpb-comment-tooltips. داخل هذا المجلد ، تحتاج إلى إنشاء هذه الملفات الثلاثة:
wpb-comment-tooltips.php
wpb-tooltip.css
wpb-tooltip.js
استخدم محرر نص عادي مثل Notepad لإنشاء هذه الملفات. بمجرد إنشاء الملفات ، ستحتاج إلى فتحها wpb-comment-tooltip.phpفي محرر نصوص. انسخ هذا الرمز والصقه في الملف:
<?php
/**
Plugin Name: WPBeginner's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/
// Only load our scripts and style when a comment form is displayed
add_action( 'comment_form_before', 'wpb_comment_tooltips' );
function wpb_comment_tooltips() {
wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);
}
// Modify comment form fields and add title attribute to form input fields
function alter_comment_form_fields($fields){
$fields['email'] = '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' /></p>';
$fields['url'] = '<p class="comment-form-url"><label for="url">' .
__( 'Website', 'twentythirteen' ) . '</label>' .
'<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></p>';
$fields['author'] = '<p class="comment-form-author">' .
'<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
'" size="30"' . $aria_req . ' /></p>';
return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>
في الكود أعلاه ، أنشأنا أولاً رأس البرنامج المساعد ، مع إعطاء هذا الملحق اسمًا ووصفًا. بعد ذلك نقوم بتحميل ملف JavaScript و CSS الخاص بنا (انظر دليلنا حول كيفية إضافة JavaScript والأنماط في ووردبريس ).
نتأكد أيضًا من تحميل هذه الملفات فقط عند عرض نموذج تعليق. بعد ذلك قمنا بتعديل نموذج التعليق الافتراضي وأضفنا سمة العنوان في حقول الإدخال. تحتوي سمة العنوان هذه على الرسالة التي نريد عرضها في تلميح الأداة. على سبيل المثال ، في مجال المؤلف استخدمنا:
title=”Please use your real name, no keywords.”
الآن بعد أن أنشأت ملف البرنامج المساعد ، حان الوقت لإضافة القليل من jQuery. افتح wpb-tooltip.jsالملف وأضف هذا الرمز بداخله:
(function($) {
$( "#commentform" ).tooltip({ position: {
my: "center bottom-10",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
} } });
})(jQuery);في هذا الكود ، #commentformهو المحدد حيث سيعرض jQuery تلميحات الأدوات .tooltipوهو جزء المحتوى حيث حددنا موضع تلميحات الأدوات.
الآن الخطوة الأخيرة هي إضافة القليل من CSS في wpb-tooltip.cssالملف. ما عليك سوى نسخ هذا الرمز ولصقه:
.ui-tooltip, .arrow:after {
background: #356aa0;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px #356aa0;
max-width:350px;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px #356aa0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}لا تتردد في تعديل ملف CSS هذا لتلبية احتياجاتك.
هذا كل شئ. لقد نجحت الآن في إنشاء مكون إضافي يضيف تلميحات أدوات jQuery في نموذج تعليق ووردبريس الخاص بك. كل ما عليك فعله هو تحميل wpb-comment-tooltipsمجلد من سطح المكتب الخاص بك إلى /wp-content/plugins/دليل على خادم الويب الخاص بك باستخدام عميل FTP مثل Filezilla. بمجرد تحميل المكون الإضافي ، انتقل إلى صفحة الملحقات في منطقة إدارة ووردبريس وقم بتنشيط المكون الإضافي.
نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية إضافة تلميحات أدوات jQuery في نموذج تعليقات ووردبريس. نحن نشجعك على تعديل هذا الرمز ومحاولة إضافة تلميحات الأدوات إلى أماكن أخرى. على سبيل المثال ، تحقق من كيفية إضافة شهادات تلميحات الأدوات إلى موقعنا. للردود والأسئلة ، يرجى ترك تعليق أدناه.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
