logo-dohoalaptrinh

Trung tâm đào tạo đồ họa designtech

Chuyên lĩnh vực : đồ họa quảng cáo in ấn, thiết kế nội thất ngoại thất, phối cảnh, xây dựng, cơ khí

Trang chủ » Tài liệu wordpress » Hướng dẫn custom header và footer
Đánh Giá

Hướng dẫn custom header và footer

Đánh Giá

Hướng dẫn custom header và footer

Chào các bạn hôm nay mình xin hướng dẫn cách tạo custom header và footer . Bạn cũng thấy không phải khách hàng nào cũng biết code nên việc can thiệp . Chỉnh sửa code header và footer rất khó khăn vậy tại sao bạn không làm custom cho dễ dàng sử dụng. Hôm nay mình xin giới thiệu cho anh em custom nhé

1 Sơ lược qua về Customizer

Customizer chia làm 4 loại chính: Panel, Section, Setting và Control. Setting để cài đặt hiển thị và liên kết với Control tương tác với người dùng. Section và cùng chứa các options. Panel chứa nhiểu nhóm Section…

Để thêm, xóa và chỉnh sửa các object chúng ta sẽ sử dụng customize_register hook.

[sourcecode language=”plain”]
function themeslug_customize_register( $wp_customize ) {
// Do stuff with $wp_customize, the WP_Customize_Manager object.
}
add_action( ‘customize_register’, ‘themeslug_customize_register’ );
[/sourcecode]

Customizer cung cấp 3 phương thức add_ , get_ và remove_ cho từng đối tượng

[sourcecode language=”plain”]
add_action(‘customize_register’,’my_customize_register’);
function my_customize_register( $wp_customize ) {
$wp_customize->add_panel();
$wp_customize->get_panel();
$wp_customize->remove_panel();

$wp_customize->add_section();
$wp_customize->get_section();
$wp_customize->remove_section();

$wp_customize->add_setting();
$wp_customize->get_setting();
$wp_customize->remove_setting();

$wp_customize->add_control();
$wp_customize->get_control();
$wp_customize->remove_control();
}
[/sourcecode]

2. Tạo Section tên Footer

Chú ý: có thể viết trực tiếp vào file functions.php hoặc tạo ra 1 file riêng rồi include vào. Trong bài này mình sẽ tạo ra 1 file riêng với tên customizer.php trong folder theme_customize để sau này dễ quản lý
Chúng ta bắt đầu với action customize_register

[sourcecode language=”plain”]
function devvn_customize_register($wp_customize)
{
//Footer
$wp_customize->add_section("footer", array(
‘title’ => __("Footer", "devvn"),
‘priority’ => 130,
‘description’ => __( ‘Description Custom footer here’ ),
));

}
add_action("customize_register","devvn_customize_register");
[/sourcecode]

Sau khi thêm đoạn code trên chúng ta sẽ được Section như sau (Xem lưu ý ở dưới):

04
Lưu ý: Khi thêm như trên Section Footer chưa hiển thị ra vì phải có setting và control bên trong thì mới hiện lên Section.

3. Thêm text vào Section

Thêm đoạn code sau vào trong function devvn_customize_register phía trên.

[sourcecode language=”plain”]
//Footer text
$wp_customize->add_setting("footer_text", array(
‘default’ => ”,
‘transport’ => ‘postMessage’,
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,"footer_text",array(
‘label’ => __("Footer text here", "devvn"),
‘section’ => ‘footer’,
‘settings’ => ‘footer_text’,
‘type’ => ‘textarea’,
)));
[/sourcecode]

Thêm tùy chỉnh màu background

[sourcecode language=”plain”]
//Footer background color
$wp_customize->add_setting("footer_bg_color", array(
‘default’ => ‘#ccc’,
‘transport’ => ‘postMessage’,
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, ‘footer_bg_color’, array(
‘label’ => ‘Footer Background Color’,
‘section’ => ‘footer’,
‘settings’ => ‘footer_bg_color’,

)));

//Footer text color
$wp_customize->add_setting("footer_text_color", array(
‘default’ => ‘#000’,
‘transport’ => ‘postMessage’,
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, ‘footer_text_color’, array(
‘label’ => __(‘Footer Text Color’, ‘devvn’),
‘section’ => ‘footer’,
‘settings’ => ‘footer_text_color’,

)));[/sourcecode]

Thêm phần upload ảnh

[sourcecode language=”plain”]
//Footer logo
$wp_customize->add_setting("footer_logo", array(
‘transport’ => ‘postMessage’,
));
$wp_customize->add_control(new WP_Customize_Upload_Control($wp_customize,’footer_logo’,array(
‘label’ => __(‘Footer Logo’, ‘devvn’),
‘section’ => ‘footer’,
‘settings’ => ‘footer_logo’,
)));
[/sourcecode]

4. Hiển thị

Để hiển thị các biến ta dùng hàm get_theme_mod(‘TÊN ID’,’GIÁ TRỊ MẶC ĐỊNH’) ví dụ để gọi ô text ở trên ta viết

[sourcecode language=”plain”]<?php echo get_theme_mod(‘footer_text’);?>
[/sourcecode]

Để áp dụng màu thì ta phải thêm css vào wp_head hoặc css inline. Chúng ta dùng hàm sau để thêm màu background và màu text vào wp_head.

[sourcecode language=”plain”]
function get_custom_style() {
$options = get_theme_mods();
?>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20footer.footer%20%7B%20%0A%20%20%20background%3A%20%3C%3Fphp%20echo%20%24options%5B’footer_bg_color’%5D%3B%20%3F%3E%3B%20%0A%20%20%20color%3A%20%3C%3Fphp%20echo%20%24options%5B’footer_text_color’%5D%3B%20%3F%3E%3B%0A%20%7D%0A%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

<?php
}
add_action( ‘wp_head’, ‘get_custom_style’ );
[/sourcecode]

5. Chức năng Live Preview

Chức năng này là chức năng hay nhất của customizer. Để người dùng có cái nhìn trực quan và ngay lập tức khi thay đổi các giá trị. Thực ra đến bước 7 là đã sử dụng được rồi, khi lưu thay đổi là đã thay đổi trong sql rồi nhưng để khai thác hết các chức năng hay trong WordPress nên chúng ta sẽ làm thêm bước Live Preview này nữa nhé.

[sourcecode language=”plain”]
function devvn_customizer_live_preview(){
wp_enqueue_script("devvn-themecustomizer", get_template_directory_uri() . "/theme_customize/theme-customizer.js", array("jquery", "customize-preview"), ”, true);
}
add_action("customize_preview_init", "devvn_customizer_live_preview");

function devvn_customize_control_js() {
wp_enqueue_script( ‘color-scheme-control’, get_template_directory_uri() . ‘/theme_customize/color-scheme-control.js’, array( ‘customize-controls’, ‘iris’, ‘underscore’, ‘wp-util’ ), ”, true );
}
add_action( ‘customize_controls_enqueue_scripts’, ‘devvn_customize_control_js’ );

function devvn_get_color_scheme_css( $colors ) {
$colors = wp_parse_args( $colors, array(
‘footer_bg_color’ => ”,
‘footer_text_color’ => ”
) );

return <<<CSS footer.footer { background: {$colors[‘footer_bg_color’]}; color: {$colors[‘footer_text_color’]};} CSS; } function devvn_color_scheme_css_template() { $colors = array( ‘footer_bg_color’ => ‘{{ data.footer_bg_color }}’,
‘footer_text_color’ => ‘{{ data.footer_text_color }}’,
);
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fhtml%22%20id%3D%22tmpl-devvn-color-scheme%22%3E%0A%20%3C%3Fphp%20echo%20devvn_get_color_scheme_css(%20%24colors%20)%3B%20%3F%3E%0A%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<?php
}
add_action( ‘customize_controls_print_footer_scripts’, ‘devvn_color_scheme_css_template’ );
[/sourcecode]

Thêm file theme-customizer.js

[sourcecode language=”plain”]
(function($){
var style = $( ‘#devvn-color-scheme-css’ ),
api = wp.customize;

if ( ! style.length ) {
style = $( ‘head’ ).append( ‘
<style type="text/css" id="devvn-color-scheme-css" />’ )
.find( ‘#devvn-color-scheme-css’ );
}
api("footer_text", function(value) {
value.bind(function(newval) {
$(".footer_text").html(newval);
});
});
api("footer_logo", function(value) {
value.bind(function(newval) {
$(".footer_logo img").attr(‘src’,newval);
});
});
// Color Scheme CSS.
api.bind( ‘preview-ready’, function() {
api.preview.bind( ‘update-color-scheme-css’, function( css ) {
style.html( css );
} );
} );
})(jQuery);
[/sourcecode]

Thêm file color-scheme-control.js

[sourcecode language=”plain”]
( function( api ) {
var cssTemplate = wp.template( ‘devvn-color-scheme’ ),
colorSchemeKeys = [
‘footer_bg_color’,
‘footer_text_color’,
],
colorSettings = [
‘footer_bg_color’,
‘footer_text_color’,
];
// Generate the CSS for the current Color Scheme.
function updateCSS() {
var scheme = api( ‘footer_bg_color’ )(),
css,
colors = _.object( colorSchemeKeys, ” );

// Merge in color scheme overrides.
_.each( colorSettings, function( setting ) {
colors[ setting ] = api( setting )();
} );

css = cssTemplate( colors );

api.previewer.send( ‘update-color-scheme-css’, css );
}

// Update the CSS whenever a color setting is changed.
_.each( colorSettings, function( setting ) {
api( setting, function( setting ) {
setting.bind( updateCSS );
} );
} );
} )( wp.customize );
[/sourcecode]




    Khóa Học :
    Thời Gian Học : sángchiềutối

    Bình luận

    order

    Nguyễn Thị Thúy số điện thoại: 082.342.xxx
    tại c4/42 đường võ văn vân, ấp 3, xã vĩnh lộc b, huyện bình chánh vừa đăng ký tư vấn khóa học 8 phút trước
    order

    Nguyễn Thị Thúy số điện thoại: 082.342.xxx
    tại c4/42 đường võ văn vân, ấp 3, xã vĩnh lộc b, huyện bình chánh vừa đăng ký tư vấn khóa học 8 phút trước