اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و 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 ,,بالتوفيق

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