Hướng dẫn tạo Options Page với ACF

Đầu tiên bạn phải hiểu Options Page là như thế nào ?

Để nói về nó mình sẽ lấy một ví dụ cho đơn giản.

Giả sử mình có một script Google Analytics muốn chèn vào website để tracking traffic.

Bình thường rất đơn giản chúng ra chỉ cần móc vào hook wp_head như dưới là đã xong rồi

function add_google_analytics()
{
?>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-XX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-XXXXXXXXX-XX');
    </script>
<?php 
}
add_action( 'wp_head', 'add_google_analytics' ) ;

Tuy nhiên, ở đây khi bạn làm website cho khách hàng và bạn muốn để khách tự nhập mã google analytics một cách cực kỳ đơn giản mà khách hàng không cần phải đụng vào code thì như thế nào?

Lại một ví dụ nữa, ở bài viết thêm nút gọi điện như mình nói ở bài viết này

https://thoigianranh.com/them-icon-dien-thoai-cuc-ngau-cho-website-wordpress.html

Trong bài viết này mình có sử dụng đoạn code sau :

function add_phone_call_footer()
{
    ?>
<!-- icon phone liên hệ  -->
<a href="tel:0123456798">
    <div class="alo-phone alo-green alo-show show-active" id="alo-phoneIcon">
        <div class="alo-ph-circle"></div>
        <div class="alo-ph-circle-fill"></div>
        <div class="alo-ph-img-circle"></div>
    </div>
</a>
<?php 
}
add_action('wp_footer', 'add_phone_call_footer');

Giả sử chúng ta muốn thay đổi số điện thoại thì chúng ta mò vào code để đổi số, tuy nhiên mình đang giả sử trường hợp khách hàng của bạn thì làm thế nào ?

Ok, và bạn sẽ thấy ở 2 ví dụ trên đều có một giá trị có thể thay đổi được :

Ở ví dụ Google analytics chúng ta có ID Analytics là UA-XXXXXXXXX-XX

Và ở trong ví dụ về nút gọi điện chúng ta có số điện thoại là 0123456798

Vậy làm thế nào để thay đổi những giá trị này mà không cần vào code thì Options Page sẽ giúp bạn giải quyết vấn đề này.

Tóm lại, để giải thích cho options Page thì nó nôm na như sau :

Bạn tạo một chỗ nhập những giá trị trên ở trong Admin Dash Board và sau đó gọi nó ra ngoài trang web

Ví dụ mình tạo hai ô nhập mã ID của Analytics và số điện thoại sau đó gọi nó ra.

Dùng Plugin ACF để tạo các field nhập trong admin Dashboard

Plugin ACF sẽ giúp bạn tạo Options Page mà không mất chút sức lực nào

Đầu tiên bạn khai báo sử dụng ACF Options Page bằng cách thêm đoạn code sau vào file functions.php của theme đang sử dụng

if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_page();
    
}

Tương tự như dùng ACF cơ bản, chúng ta tạo mới một Field Group trong ACF

Ở mục Rules / Show this field group if bạn chọn Options Page thay vì Post Type như bình thường

Hướng dẫn tạo Options Page với ACF

 

Tiếp đó mình tạo filed để nhập số điện thoại và ID Google Analytics

Hướng dẫn tạo Options Page với ACF

Hướng dẫn tạo Options Page với ACF

Sau khi bạn bấm đăng thì chúng ta sẽ có

Hướng dẫn tạo Options Page với ACF

Vậy là xong, bạn có chỗ để nhập ID Analytics và Số điện thoại rồi

Gọi giá trị của các field đã nhập ra ngoài

Sau khi bạn đã tạo được các field và nhập các giá trị cho các field đó trong admin dashboard thì chúng ta sẽ thực hiện gọi chúng ra để sử dụng.

Đầu tiên là số điện thoại

Ban đầu chúng ta có đoạn code này để show số điện thoại ra ngoài

function add_phone_call_footer()
{
    ?>
<!-- icon phone liên hệ  -->
<a href="tel:0123456798">
    <div class="alo-phone alo-green alo-show show-active" id="alo-phoneIcon">
        <div class="alo-ph-circle"></div>
        <div class="alo-ph-circle-fill"></div>
        <div class="alo-ph-img-circle"></div>
    </div>
</a>
<?php 
}
add_action('wp_footer', 'add_phone_call_footer');

Vậy bây giờ bạn chỉ cần đổi cái số 0123456798 bằng giá trị đã nhập trong Options Page

Đơn giản chỉ cần dùng hàm get_the_field để đưa ra ngoài thôi.

function add_phone_call_footer()
{

$phone = get_field('phonenumber', 'option');
if($phone == "")
{
    $phone ="0123456798" ;
}

    ?>
<!-- icon phone liên hệ  -->
<a href="tel:<?php echo $phone ; ?>">
    <div class="alo-phone alo-green alo-show show-active" id="alo-phoneIcon">
        <div class="alo-ph-circle"></div>
        <div class="alo-ph-circle-fill"></div>
        <div class="alo-ph-img-circle"></div>
    </div>
</a>
<?php 
}
add_action('wp_footer', 'add_phone_call_footer');

p/s: Đầu tiên chúng ta sẽ lấy giá trị của ô nhập số điện thoại là ô phonenumber gán vào biến $phone

$phone = get_field(‘phonenumber’, ‘option’);

Nếu lấy xong mà không có giá trị thì bạn gán cho nó một số mặc định nhé

if($phone == “”) { $phone =”0123456798″ ; }

Nếu lấy xong có giá trị thì nó sẽ show ra

Sau đó thay số điện thoại thành biến $phone như sau : <a href=”tel:<?php echo $phone ; ?>”> là xong

Gọi Google Analytics

Tương tự như số điện thoại thì Google Analytics bạn cũng thay chuỗi UA-XXXXXXXXX-XX thành giá trị người dùng nhập vào.

Vậy bài này đã hướng dẫn các bạn cách tạo Options Page bằng plugin ACF

Options Page có thể giúp bạn nhiều thứ hơn và tùy từng website chúng ta sẽ custom Options Page khác nhau.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments