Cách tạo 1 block trong wordpress

Bắt đầu từ phiên bản wordpress 5.0 trở lên thì các bạn có thể code theo dạng block, ở bài viết này netweb.vn sẽ hướng dẫn các bạn cách code 1 block wordpress như thế nào nhé!

Code block với Advanced Custom Fields Pro

các bạn cần phải có bản pro của acf nhé! vì bản pro nó mới hỗ trợ block giúp cho việc code block trên wordpress đơn giản hơn

ở bài viết này mình sẽ hướng dẫn các bạn cách tạo 1 icon box cực kỳ đơn giản nhé

Code tạo block acf chèn vào file function.php

add_action('acf/init', 'my_slide_content');
function my_slide_content() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a block.
        acf_register_block_type(array(
            'name'              => 'slide-content',
            'title'             => __('Icon Box'),
            'description'       => __('Icon Box'),
            'render_template'   => 'template-parts/blocks/icon-box.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'icon box', 'icon' ),
        ));
    }
}

Tạo 1 tập tin vào thư mục của theme template-parts/blocks/icon-box.php

Full code icon-box.php

<?php 
if (empty(get_field('icon_box'))) {
    echo 'Click vào edit để nhập slider...'; 
 }
?>

<?php $colum = get_field('chon_so_cot'); ?>

<div class="row">
	
	<?php while (have_rows('icon_box')) : the_row(); ?>
		<div class="col-sm-<?php echo $colum; ?> icon-box-ok">
			<img src="<?php echo get_sub_field('image_icon_box'); ?>" alt="Thiết kế web di động" class="icon-pic">
			<h3><?php echo get_sub_field('title_icon_box'); ?></h3>
			<?php if (get_sub_field('des_icon_box')) : ?>
				<?php echo get_sub_field('des_icon_box'); ?>
			<?php endif; ?>
		</div>
	<?php endwhile; ?>
	
</div>

<style>
.icon-box-ok {
    margin: 30px 0;
    text-align: center;
}

.icon-box-ok img {
    text-align: center;
    max-height: 100px;
	max-width: 100px;
}
	
.icon-box-ok h3 {
    margin-top: 13px;
}

</style>

Hình ảnh trong admin

Bài viết mới cập nhập

• 

  Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

  8 tháng trước, 191 Lượt xem

  Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

• 

  Hướng dẫn tạo user thành viên và quản lý đơn hàng

  8 tháng trước, 199 Lượt xem

  Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

• 

  Hướng dẫn Plugin floating contact

  10 tháng trước, 338 Lượt xem

  Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

• 

  ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

  11 tháng trước, 220 Lượt xem

  Hôm nay netweb sẽ hướng dẫn các bạn ánh xạ ổ đĩa mạng để làm việc online dùng như ổ cứng bình thường qua OneDrive…

• 

  Backup Yandex Mail

  12 tháng trước, 229 Lượt xem

  Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…