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á

Nội dung trang

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

Liên Hệ

VP1 : P205, Tầng 2 Tòa nhà Bộ Tư Lệnh Tăng Thiết Giáp, Ngõ 180, Đường Đình Thôn, Phường Mỹ Đình 1, Quận Nam Từ Liêm, TP Hà Nội
VP2 : Số 2 Đường Cửa Đình - Phường Phú Đô - Nam Từ Liêm - Hà Nội
VP3 : Phòng 1013 tầng 10 tòa nhà FLC - 36 Phạm Hùng - Nam Từ Liêm - Hà Nội ( ngay cạnh bến xe mỹ đình)
VP4 : P103 TẦNG 1, SỐ NHÀ 3, NGÕ 135 NGUYỄN VĂN CỪ, LONG BIÊN, HÀ NÔI ( CÁCH BỆNH VIỆN ĐA KHOA BẮC HÀ 100M)
VP5 : P306 TÒA B3, Khu Tập Thể Du Lịch, Ngõ 1 Kim Đồng , Phường Giáp Bát, Quận Hoàng Mai, Hà Nội (Cách Bến Xe Giáp Bát 500m)