5 طرق لإضافة أداة التاريخ والوقت إلى موقع WordPress الخاص بك

عرض عنصر واجهة التاريخ والوقت هو شيء بدأ مع مواقع الصحف على الويب. الحصول على تاريخ اليوم من صحيفتهم مجرد شيء كان دائمًا جزءًا من حياة الناس. عندما انتقلت الصحافة المطبوعة إلى الويب ، لم يكن ذلك على وشك التغيير.

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

• يمكنك عرض الوقت الحالي في منطقتك الزمنية للسماح للعملاء بمعرفة متى يمكنهم الوصول إلى دعم العملاء
• يجعل موقعك يبدو حيًا وملائمًا ، حتى لو كان المحتوى الخاص بك أقدم قليلاً. هذا مهم لأن معظمنا يبحث عن أحدث المعلومات.
• إذا كانت هناك أحداث قادمة على صفحتك ، فإن الوقت والتاريخ الحاليين يساعدان الزائرين على فهم المدة التي يحتاجون إليها في انتظارهم (بدلاً من ذلك ، استخدم وحدة مؤقت للعد التنازلي مثل تلك المضمنة في سمة Divi)

باختصار ، يساعد عرض أداة التاريخ والوقت في ربط جمهورك ، ويجعل موقعك أكثر جاذبية ويضعك كمزود لأحدث الأخبار والمعلومات. سبب كافٍ لمعرفة كيفية تنفيذ واحد على موقع WordPress الخاص بك.

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

يبدو جيدا؟ ثم دعونا لا نتحلى بالجنون ولكن علينا الحق في ذلك.

كيفية إنشاء أداة التاريخ والوقت يدويًا في WordPress

إحدى الطرق لتضمين الوقت والتاريخ الحاليين على موقعك هي كتابة أحد الحلول بنفسك. هذا ما سنفعله أولاً. سننشئ رمزًا قصيرًا بسيطًا ، إذا تم إدخاله في أي مكان على موقعك ، فسيعرض هذا الوقت والتاريخ للزائرين.

قم بإنشاء الرمز القصير

خطوتنا الأولى هي إعداد الرمز القصير الفعلي. لذلك ، سنفتح أولاً function.php لموضوعنا الحالي. نوصي بشدة باستخدام سمة فرعية لذلك حتى لا تفقد أي تغييرات عند تحديث المظهر الرئيسي الخاص بك.

بمجرد فتح الملف ، الصق هذا الجزء من الكود في نهايته:

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

بعض المعلومات عن ذلك: الكود أعلاه هو وظيفة تبث التاريخ والوقت الحاليين ثم تعينها لرمز قصير يسمى [time_date] . إذا أدخلت الرمز القصير على موقعك ، فسيقوم باستدعاء الوظيفة للعمل.

في التنسيق الذي استخدمناه أعلاه ، يتم إخراج الوقت والتاريخ بهذا التنسيق: 6 يوليو 2017 ، 12:35:41. ومع ذلك ، يمكنك استخدام تنسيقات مختلفة يمكنك التعرف عليها هنا.

الآن ، لاختبار الرمز ، ما عليك سوى نسخ الرمز القصير في مكان ما على موقعك. كن على علم ، مع ذلك ، أن الرموز القصيرة الافتراضية لا تعمل داخل الأدوات. من أجل استخدامها ، تحتاج إما إلى تثبيت البرنامج المساعد Shortcode Widget أو إضافة هذا السطر إلى function.php .

add_filter('widget_text','do_shortcode');

بعد ذلك ها هي النتيجة:

قم بالتبديل إلى JavaScript

تبدو جيدة حتى الآن ، أليس كذلك؟ ومع ذلك ، إذا اتبعت الخطوات المذكورة أعلاه ، فستلاحظ بسرعة أن الساعة لا تقوم بتحديث نفسها. بدلاً من ذلك ، فإنه لا يبث الوقت الحالي إلا مرة واحدة - عندما يتم تحميل الصفحة. بعد ذلك يبقى ثابتًا ، أي نوع من الهزيمة الغرض إلى حد ما ، ألا توافق؟

هذا لأن PHP هي لغة جانب الخادم ، مما يعني أنك بحاجة إلى إجراء مكالمات إضافية للخادم لتحديث المعلومات. لهذا السبب ، من الأفضل العمل مع لغة من جانب العميل مثل JavaScript.

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

يستدعي البرنامج النصي div من اسم Clockbox . لهذا السبب ، قمت بتغيير وظيفتي السابقة إلى ما يلي:

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

الآن ، كل ما تبقى هو الاتصال بملف JavaScript الجديد الخاص بي:

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

وفويلا:

أضف التصميم

أخيرًا ، ربما تريد أن تكون قادرًا على تصميم أداة الوقت والتاريخ بحيث تناسب علامتك التجارية بشكل عام. لحسن الحظ ، نظرًا لأن الوظيفة التي استخدمناها أنشأنا معرف CSS ، يمكننا إضافة التصميم الخاص بنا إلى أداة التاريخ والوقت مثل:

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

ها هي النتيجة:

لم يكن ذلك صعبًا الآن ، أليس كذلك؟ أخبرك أنه سيكون من السهل. ومع ذلك ، فهذه طريقة واحدة فقط لإنشاء أداة التاريخ والوقت الخاصة بك. مع شرائح الترميز الإضافية ، يمكنك تحقيق الكثير.

ومع ذلك ، إذا لم تكن واحدًا من أجل المسار اليدوي ، فيمكنك أيضًا تحقيق نتائج مماثلة بمساعدة مكونات WordPress الإضافية.

الإضافات لإنشاء أدوات الوقت والتاريخ لموقع الويب الخاص بك

في حين أن عدد المكونات الإضافية المتاحة في دليل WordPress ليس هائلاً ، إلا أن هناك عددًا قليلاً من العينات التي تقوم بعمل جيد بما فيه الكفاية.

تاريخ الساعة الحية

المنافس الأول لدينا هو هذا البرنامج المساعد. كما يوحي الاسم ، يسمح لك بإضافة الساعة والتاريخ إلى موقع WordPress الخاص بك.

توفر أداة الوقت والتاريخ الخاصة بهم الكثير من خيارات التخصيص. يمكنك الاختيار بين دورة 12 أو 24 ساعة ، سواء لتحديث الساعة كل دقيقة أو ثانية ، أو إظهار أو إخفاء التاريخ وتحديد ترتيبها. تحتوي الأداة أيضًا على قسم لـ CSS مخصص حتى تتمكن من استخدام نفس الخط مثل موقع الويب الخاص بك والمزيد.

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

أداة التاريخ والوقت

أولا ، قليلا من التحذير. هذا المكون الإضافي قديم بعض الشيء وتم تحديثه آخر مرة منذ عامين. نتيجة لذلك ، ليس هناك ما يضمن أنها ستعمل مع جميع السمات الحديثة وأحدث إصدار من WordPress. ومع ذلك ، نظرًا لأنه كان يعمل بشكل جيد في اختباري مع WordPress 4.8 ويقدم مجموعة رائعة من الخيارات ، اعتقدت أنه يستحق تضمينها.

بعد التثبيت ، يضيف البرنامج المساعد أداة التاريخ والوقت الجديدة إلى قائمة الأدوات. عند إضافته إلى منطقة عنصر واجهة المستخدم ، فإنه يمنحك العديد من الطرق للتخصيص.

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

التاريخ والوقت الحاليان

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

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

استنتاج

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

كما رأيت مما سبق ، هناك عدة طرق لتطبيق ذلك في WordPress. الأول هو إعداد الرمز القصير الخاص بك لتنفيذ القطعة في أي مكان تريده. بالطبع ، هناك أيضًا مكونات إضافية يمكنها أن تفعل الشيء نفسه بالنسبة لك. على الرغم من أنه ليس ساحقًا ، إلا أن هناك بعض المتنافسين الأقوياء.

الآن إنتقل إليكم. هل استخدمت أداة الوقت والتاريخ على موقعك من قبل؟ إذا كان الأمر كذلك ، فما الذي كنت بحاجة إليه وكيف تم تنفيذه؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.

الصورة المصغرة للمادة بواسطة جين كيلي / shutterstock.com