Thêm font family vào editor wordpress

24/12/2015 10:44 4934

Hôm nay tôi sẽ chia sẽ với anh/chị chủ đề thêm font family vào editor wordpress

Ở đây tôi lấy ví dụ là tôi muốn thêm font family có tên là font-family: ‘ThirstySoftRegular’;và font-family: ‘Oswald’, sans-serif

Xem video để thấy cách tôi làm nhé anh/chị

https://www.youtube.com/watch?v=_dX7AZKBoFg

Thêm box chọn font family và font size (thêm đoạn code sau vào file function.php)

add_filter('mce_buttons_2', 'more_editor_add_font_family_row_3',888 );
function more_editor_add_font_family_row_3( $options ) {
	array_shift( $options );
	array_unshift( $options, 'fontsizeselect');
	array_unshift( $options, 'fontselect');
	//array_unshift( $options, 'formatselect');
	
	return $options;
}

add_filter('mce_buttons_2', 'more_editor_add_font_family_row_3',888 );

function more_editor_add_font_family_row_3( $options ) {

array_shift( $options );

array_unshift( $options, 'fontsizeselect');

array_unshift( $options, 'fontselect');

//array_unshift( $options, 'formatselect');

return $options;

}

Các bài viết khác có thể hữu ích với bạn

Như thế nào để viết một plugin cho editor wordpress - TinyMCE

Thêm tên font family vào thanh drop down font family

Mở file function và copy code sau vào:

function more_editor_register_tinymce_fonts( $settings ) {
		global $settings_list_font;
		
        $settings['font_formats'] =
		"Noteworthy Script='Noteworthy Script';".
		"Saron Script='Saron Script'".
		"Oswald='Oswald', sans-serif;".
		"Lobster='Lobster', cursive;".
		"Open Sans='Open Sans', sans-serif;".
		"Roboto='Roboto', sans-serif;".
		"Roboto Condensed='Roboto Condensed', sans-serif;".
		"Source Sans Pro='Source Sans Pro', sans-serif;".
		"Open Sans Condensed='Open Sans Condensed', sans-serif;".
        "Roboto Slab='Roboto Slab', serif;".
        "Arimo='Arimo', sans-serif;".
		"Noto Sans='Noto Sans', sans-serif;".
		"Alegreya Sans='Alegreya Sans', sans-serif;".
		"Noto Serif='Noto Serif', serif;".
		"Noticia Text='Noticia Text', serif;".
		"EB Garamond='EB Garamond', serif;".
		"Tinos='Tinos', serif;".
		"Roboto Mono='Roboto Mono';".
		"Patrick Hand='Patrick Hand', cursive;".
		"Alegreya Sans SC='Alegreya Sans SC', sans-serif;".
		"Cousine='Cousine'".
		"Judson='Judson', serif;".
		"Patrick Hand SC='Patrick Hand SC', cursive;".
		"Itim='Itim', cursive;".
		"Kanit='Kanit', sans-serif;".
		"Chonburi='Chonburi', cursive;".
		"Bebasneue='Bebas Neue;".
        'Andale Mono=andale mono,times;'.
        'Arial=arial,helvetica,sans-serif;'.
        'Arial Black=arial black,avant garde;'.
        'Book Antiqua=book antiqua,palatino;'.
        'Comic Sans MS=comic sans ms,sans-serif;'.
        'Courier New=courier new,courier;'.
        'Georgia=georgia,palatino;'.
        'Helvetica=helvetica;'.
        'Impact=impact,chicago;'.
        'Symbol=symbol;'.
        'Tahoma=tahoma,arial,helvetica,sans-serif;'.
        'Terminal=terminal,monaco;'.
        'Times New Roman=times new roman,times;'.
        'Trebuchet MS=trebuchet ms,geneva;'.
        'Verdana=verdana,geneva;'.
        'Webdings=webdings;'.
        'Wingdings=wingdings,zapf dingbats;';
		$settings_list_font = $settings;
        return $settings;
    }
add_filter('tiny_mce_before_init', 'more_editor_register_tinymce_fonts');

function more_editor_register_tinymce_fonts( $settings ) {

global $settings_list_font;

$settings['font_formats'] =

"Noteworthy Script='Noteworthy Script';".

"Saron Script='Saron Script'".

"Oswald='Oswald', sans-serif;".

"Lobster='Lobster', cursive;".

"Open Sans='Open Sans', sans-serif;".

"Roboto='Roboto', sans-serif;".

"Roboto Condensed='Roboto Condensed', sans-serif;".

"Source Sans Pro='Source Sans Pro', sans-serif;".

"Open Sans Condensed='Open Sans Condensed', sans-serif;".

"Roboto Slab='Roboto Slab', serif;".

"Arimo='Arimo', sans-serif;".

"Noto Sans='Noto Sans', sans-serif;".

"Alegreya Sans='Alegreya Sans', sans-serif;".

"Noto Serif='Noto Serif', serif;".

"Noticia Text='Noticia Text', serif;".

"EB Garamond='EB Garamond', serif;".

"Tinos='Tinos', serif;".

"Roboto Mono='Roboto Mono';".

"Patrick Hand='Patrick Hand', cursive;".

"Alegreya Sans SC='Alegreya Sans SC', sans-serif;".

"Cousine='Cousine'".

"Judson='Judson', serif;".

"Patrick Hand SC='Patrick Hand SC', cursive;".

"Itim='Itim', cursive;".

"Kanit='Kanit', sans-serif;".

"Chonburi='Chonburi', cursive;".

"Bebasneue='Bebas Neue;".

'Andale Mono=andale mono,times;'.

'Arial=arial,helvetica,sans-serif;'.

'Arial Black=arial black,avant garde;'.

'Book Antiqua=book antiqua,palatino;'.

'Comic Sans MS=comic sans ms,sans-serif;'.

'Courier New=courier new,courier;'.

'Georgia=georgia,palatino;'.

'Helvetica=helvetica;'.

'Impact=impact,chicago;'.

'Symbol=symbol;'.

'Tahoma=tahoma,arial,helvetica,sans-serif;'.

'Terminal=terminal,monaco;'.

'Times New Roman=times new roman,times;'.

'Trebuchet MS=trebuchet ms,geneva;'.

'Verdana=verdana,geneva;'.

'Webdings=webdings;'.

'Wingdings=wingdings,zapf dingbats;';

$settings_list_font = $settings;

return $settings;

}

add_filter('tiny_mce_before_init', 'more_editor_register_tinymce_fonts');

Thêm font vào file font-family.css (tạo một file font-family.css và chuẩn bị font muốn thêm)

@font-face {
	font-family: 'Oswald, sans-serif';
	src:url('oswald/oswald-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Saron Script';
	src:url('saron-script.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Noteworthy Script';
	src:url('noteworthy-script.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('bebas-neue/bebasneue.woff') format('woff');
}

@font-face {

font-family: 'Oswald, sans-serif';

src:url('oswald/oswald-regular.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Saron Script';

src:url('saron-script.otf') format('truetype');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Noteworthy Script';

src:url('noteworthy-script.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Bebas Neue';

font-style: normal;

font-weight: normal;

src: local('Bebas Neue'), url('bebas-neue/bebasneue.woff') format('woff');

}

Làm cho font có tác dụng trong editor (copy đoạn code sau vào file functions.php)

function more_editor_add_editor_styles() {
    add_editor_style(get_stylesheet_directory_uri().'/css/font-family.css' );
}
add_action( 'admin_init', 'more_editor_add_editor_styles' );

function more_editor_add_editor_styles() {

add_editor_style(get_stylesheet_directory_uri().'/css/font-family.css' );

}

add_action( 'admin_init', 'more_editor_add_editor_styles' );

Làm cho font có tác dụng ngoài front end (copy đoạn code sau vào file functions.php)

add_action( 'wp_enqueue_scripts', 'standard_load_scripts' );
function standard_load_scripts() {
	wp_enqueue_style( 
        'add-font-family', get_stylesheet_directory_uri().'/css/font-family.css', array(),'1.0.1' 
    );
	
}

add_action( 'wp_enqueue_scripts', 'standard_load_scripts' );

function standard_load_scripts() {

wp_enqueue_style(

'add-font-family', get_stylesheet_directory_uri().'/css/font-family.css', array(),'1.0.1'

);

}

Tận hưởng thành quả

Tìm kiếm bài viết này trên google

Thêm font family vào editor wordpress

4.9/5 (17 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Như thế nào để viết một plugin cho editor wordpress – TinyMCE [ 25/12/2015 06:52 ]

Thêm font family vào editor wordpress

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)