Tôi sẽ chỉ cho bạn cách tạo hiệu ứng nút bật tắt đơn giản với PHP & JQuery cho trang WordPress của bạn. Tôi đang tạo shortcode vì tôi có thể dễ dàng thêm nút này vào bất kỳ trang / bài đăng nào hoặc nội dung loại bài đăng tùy chỉnh.
PHP
Mở tệp functions.php của chủ đề đang hoạt động của bạn và thêm mã này vào cuối tệp.add_shortcode( 'toggle_button', 'tbtn_toggle_button_shortcode' );
function tbtn_toggle_button_shortcode( $atts, $content ) {
$defaults = array(
'title' => '',
);
$atts = shortcode_atts( $defaults, $atts, 'toggle_button' );
$btn_html = '';
if( ! empty( $atts['title'] ) ) {
$btn_html .= '<div class="toggle tie-sc-close">' . "\n";
$btn_html .= '<h3 class="toggle-head">' . esc_attr( trim( $atts['title'] ) ) . ' <span class="fa fa-angle-down" aria-hidden="true"></span></h3>'. "\n";
$btn_html .= '<div class="toggle-content">' . wp_kses_post( $content ) . '</div>' . "\n";
$btn_html .= '</div>' . "\n";
}
return $btn_html;
}
add_action( 'wp_enqueue_scripts', 'tbtn_enqueue_script' );
function tbtn_enqueue_script() {
wp_enqueue_style( 'toggle-button-css', get_stylesheet_directory_uri() . '/css/toggle-button.css', array(), time() );
wp_enqueue_script( 'toggle-button-js', get_stylesheet_directory_uri() . '/js/toggle-button.js', array(), time(), true );
}
CSS / PHONG CÁCH
Tạo một thư mục css (phân biệt chữ hoa chữ thường) nếu nó không có trong thư mục chủ đề của bạn. Sau đó, tạo một tệp CSS nhỏ “toggle-button.css” và lưu bên trong thư mục css ..toggle {
border: 1px solid #3b5998;
border-radius: 3px;
margin-bottom: 35px;
position: relative;
}
.toggle-head {
background-color: #3b5998;
color: #fff;
font-size: 16px;
}
.toggle h3 {
cursor: pointer;
font-weight: normal;
font-size: 14px;
padding: 15px;
margin: 0;
}
.toggle h3 span.fa {
float: right;
font-size: 16px;
width: 16px;
height: 16px;
text-align: center;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.toggle.tie-sc-open h3 span.fa {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.toggle.tie-sc-close .toggle-content {
display: none;
}
.toggle .toggle-content {
padding: 25px;
}
JavaScript
Chúng tôi cần tập lệnh JS nhỏ cho hiệu ứng chuyển đổi. Tạo thư mục “js” (phân biệt chữ hoa chữ thường) nếu nó không có sẵn bên trong thư mục chủ đề của bạn. Bây giờ, hãy tạo một tệp “toggle-button.js” và lưu nó vào thư mục js đó . Đây là mã của tệp JS đó.jQuery(document).ready(function(){
/**
* Toggle Shortcode
*/
jQuery('h3.toggle-head').on('click', function(){
var $thisElement = jQuery(this).parent();
$thisElement.find('div.toggle-content').slideToggle();
$thisElement.toggleClass('tie-sc-open tie-sc-close');
});
});
Bây giờ, shortcode của nút chuyển đổi [toggle_button] đã sẵn sàng. Điều hướng đến trang tổng quan của bạn, chỉnh sửa trang / bài đăng hoặc bất kỳ nội dung CPT nào và nhập mã ngắn như cách này [toggle_button title = ”ENTER TITLE”] NHẬP NỘI DUNG [/ toggle_button] .