Nội dung

Cách tạo 1 block trong wordpress

4 năm trước, Code theme wordpress, Website, Wordpress, 1395 Lượt xem

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

Tạo Field Group như hình
Thiết kế tối ưu

Thiết kế tối ưu

Giao diện website thân thiện với người sử dụng. Website tương thích tốt với các thiết bị di động như tablet, smartphone, feature phone.
Dễ dàng quản lý

Dễ dàng quản lý

Khác với các đơn vị thiết kế web giá rẻ khác, chúng tôi thiết kế theo yêu cầu, không sử dụng mã nguồn mở, giúp bảo mật cao, quản trị dễ dàng, tiết kiệm thời gian.
Tiết kiệm chi phí

Tiết kiệm chi phí

Chúng tôi luôn tối ưu hóa và cắt giảm chi phí kinh doanh. Mọi dịch vụ có giá thành rất cạnh tranh, hỗ trợ tối đa kinh phí cho các khách hàng.

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

Và icon box như html chèn trong bài, chúc các bạn thành công

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

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    1 năm trước, 446 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…

  • Backup Yandex Mail

    Backup Yandex Mail

    2 năm trước, 288 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…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)