Hướng dẫn custom header và footer
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):
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="<style>" title="<style>" />
<?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="<script>" title="<script>" />
<?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]
-
Bạn có thể xem thêm các khóa học ở dưới:
Tag: học thiết kế đồ họa tại hà nội, học thiết kế đồ họa ở hà nội, học thiết kế đồ họa ở đâu, học thiết kế đồ họa ngắn hạn, khóa học thiết kế đồ họa ở hà nội, khóa học thiết kế đồ họa tại hà nội, học thiết kế đồ họa in ấn quảng cáo tại hà nội, khóa học thiết kế đồ họa in ấn quảng cáo tại hà nội, học lập trình web ở đâu, học lập trình web tại hà nội, học lập trình php ở đâu, học lập trình php tại hà nội
Mọi thông tin bạn có thể liên hệ:
Đào tạo lập trình và thiết kế đồ họa
Hotline: 0968.853.958 hoặc hỗ trợ kỹ thuật Mr. trung: 0947.499.221
Bình luận