موقع المنح الدراسية العربي الأول

القائمة ☰

التسجيل

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php


شارك هذه الفرصة مع الأصدقاء

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس بالاستفادة من PHP و JS في نفس الوقت بالاضافة الى html و css , والأمر في غاية الروعه عندما تتقن استخدامها وتكتشف مدى القدرات والخصائص التي يمكنك عملها في موقعك الالكتروني عندما تحتاج الى تنفيذ فكرة معينه ولم تجد لها مسبقاً مثييل , واليوم سوف نشرح كيفية انشاء عداد للوقت بتاريخ معين , وخصائص هذا العداد سيكون كالتالي:

  1. التحويل التلقائي لرابط معين ستختاره انت سيقوم بتحويل الشخص الزائر اليه عند انتهاء العداد
  2. امكانية تعديل الوقت اللاحق عند انتهاء العداد من مقدمة الصفحة دون الرجوع الى خلفية وورد بريس …
  3. امكانية تنسيق شكل هذا العداد..

الخطوات:

  •  تنصيب  إضافة اسمها acf plugin wordpress  . تمكنك من عمل حقول مخصصة اانظر الصورة وطبق ماتراه حرفياً بشكل مبدأي وعند فهمك للعملية في النهاية تستيطيع التعديل كما تريد قم بتحميل الاضافة من موقعهم الرسمي من هنا 
  • انشاء ملف في مجلد الثيم اسمه countdown.php
  • انشاء ملف اخر في الثيم اسمه editdountdown.php
اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php
ACF FIELDS

أولا : قم بالذهاب الى ملف countdown.php وقم بلصق الكود التالي جافا سكريبت و php :

 <?php if( current_user_can('subscriber')) :
  echo "<h2>  انت  لست مخول للدخول لهذه الصفحة    </h2>";  
  elseif( current_user_can('administrator')) :
  get_template_part('editcountdown') ?>
  <?php endif;?>
                               
 
<p id="demo"></p>
<div class="container"> 
</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php the_field('date'); ?>;").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "أيام " + "╸  " + hours + "ساعة  " +  "╸  "
  + minutes + "دقيقة " + "╸  " + seconds + "ثانية ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "لقد تم انتهاء العداد , سيتم تحويلك الآن ";
  	window.location =("<?php the_field('url'); ?>");
  }
}, 1000);
</script>
<style>
#demo {
 display: inline-block;
 padding: 50px;
 font-size: 50px;
 background-color: black;
 color: white;
  direction: rtl;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

ثانياً : ومن ثم قم بالذهاب الى ملف editdountdown.php وقم بلصق الكود التالي :

الدروس السابقة :

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">تعديل المنشور </button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
   <?php  acf_form_head(); ?> <?php  
            acf_form ();?>
    </div>
  </div>
</div>

ثالثاً : الخطوة التي تليها هي الذهاب الى ملف functions.php ولصق الكود التالي :

function stu_countdown_shortcode( $attr ) {
    ob_start();
    get_template_part('countdown');
    return ob_get_clean();
}
add_shortcode( 'countdown', 'stu_countdown_shortcode' );

كيف تستخدم العداد :
في الكود الأخير قمنا بعمل ما يسمى الكود المختصر في وورد بيس والأن تستطيع أن تقوم باستخدام الكود التالي في أي مكان تريد في الموقع باستخدام الكود التالي [countdown] , ولكن لا تنسى بتغيير ان تقوم من خلال اضافة acf بتعيين الحقول للصفحة او المقال الجديد الذي تريد استخدامه في حال كنت تريد استخدامه في غير الصفحة الرئيسية ..

 شرح الكود :

كما تلاحظ في اول صورة توضيحية لاضافة ACF قمنا بانشاء حقلين , واحد اسمه DATE و الثاني اسمه url , وهذان الحقلان هما المسؤولان عن ادخال التاريخ للعداد والرابط لاعادة التوجيه..

// Set the date we're counting down to var countDownDate = new Date("<?php the_field('date'); ?>;").getTime();

وكما تلاحظ في الكود الأول :


قمنا باخباره أن يأخذ قيمة الحقل date لادخال التاريخ للعداد . وفي نهاية الكود ايضا في السطر

document.getElementById("demo").innerHTML = "لقد تم افتتاح السوق , سيتم تحويلك الآن "; window.location =("<?php the_field('url'); ?>");

قمنا باخباره ان يأخذ قيمة الحقل url عند انتهاء العداد لكي يقوم باعادة تحويل المستخدم ..

انتهى الدرس , تستطيع أن تقوم بالتعديل على المسميات في الكود كما تريد WordPress Countdown Timer ,,بالتوفيق

تعلم في سلسلة انشاء ثيم وورد بريس من الصفر من رابط الدروس التالي من هنا



شارك هذه الفرصة مع الأصدقاء

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *



الزوار قاموا بقراءة ما يلي أيضاً

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

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

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

تخصيص القالب في ووردبريس customizer هو ما يعرف عند الذهاب الى قسم مظهر , ثم الضغط على تخصيص , ستجد عادة في كل ثيم منصب اقسام معينة مثل التحكم... قراءة المزيد

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

انشاء صفحة الأرشيف في وورد بريس نعني بها تلك الصفحة التي تظهر كل المقالات المضافة في الموقع , مثال : شخص ما قام بالضغط على اسم كاتب... قراءة المزيد

اظهار المقالات في وورد بريس الدرس الرابع عشر

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات... قراءة المزيد

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية – الدرس الثاني عشر

إظهار مقالات وورد بريس بالصفحات والصفحة الرئيسية - الدرس الثاني عشر , في الدرس السابق تعلمنا كيف نقوم بانشاء الصفحة الرئيسية وتصميمها... قراءة المزيد

انظر المنح التالية

القائمة الشاملة ←

منحة جامعة وايكاتو في نيوزيلندا لدراسة البكالوريوس والماجستير والدكتوراه

تقبل منحة جامعة وايكاتو في نيوزيلندا الآن طلبات الحصول على منح التميز الدولي للطلاب الذين يسجلون لأول مرة

منحة البكالوريوس في جامعة هونج كونج

منحة البكالوريوس في جامعة هونج كونج للطلبة ذوى الكفاءات الأكاديمية العالية الفرصة للتقديم على المنحة، والمنحة مقدمة للطلاب

منحة جامعة دايتون للبكالوريوس في أمريكا

منحة جامعة دايتون للبكالوريوس للجدارة للعام الأول المختار وتحويل المتقدمين الدوليين الجامعيين. تبلغ هذه المنح الدراسية ما يصل

كورس أون لاين للتعلم الالي مقدم من جامعة ستانفورد

كورس أون لاين للتعلم الالي مقدم من جامعة ستانفورد : التعلم الآلي هو علم جعل أجهزة الكمبيوتر تعمل

STUDYSHOOT ©