无插件为你 WordPress 站点添加移动端样式

WordPress开发 10,190 Loading收藏1
虎皮椒-个人微信和支付宝支付接口

如果你想制作手机端如下的样式，那请看本文教材。

特别声明：本教程的样式采集自Mobile Pack移动主题样式，并由小猫进行局部修改，去掉一切JS，并不需要安装之类，只要跟我以下步骤操作即可。效果图（不同手机浏览器端色调可能有所不同）：

20140422124313

1.先下载所需文件（本站下载 | 百度网盘下载 密码：9col） ，里面有5个文件，一共15KB而已。把这5个文件放在你主题根目录下面。

2.在function.php追加这些方法。可能你的主题已经有先某些函数了，那你可以不用加那些已经存在的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

//面包屑
function fairy_breadcrumbs() {
	$delimiter = '»';
	$home = '首页'; 
	$before = '<span>'; 
	$after = '</span>'; 
	if ( !is_home() && !is_front_page() || is_paged() ) {
		echo '<div id="crumbs">';
		global $post;
		$homeLink = get_bloginfo('url');
		echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
		if ( is_category() ) {
			global $wp_query;
			$cat_obj = $wp_query->get_queried_object();
			$thisCat = $cat_obj->term_id;
			$thisCat = get_category($thisCat);
			$parentCat = get_category($thisCat->parent);
			if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
			echo $before . ' "' . single_cat_title('', false) . '" 目录下的文章' . $after;
		} else if ( is_single() && !is_attachment() ) {
			if ( get_post_type() != 'post' ) {
				$post_type = get_post_type_object(get_post_type());
				$slug = $post_type->rewrite;
				echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
				echo $before . get_the_title() . $after;
			} else {
				$cat = get_the_category(); $cat = $cat[0];
				echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
				echo $before . get_the_title() . $after;
			}
		} else if ( !is_single() && !is_page() && get_post_type() != 'post' ) {
			$post_type = get_post_type_object(get_post_type());
			echo $before . $post_type->labels->singular_name . $after;
		}
		if ( get_query_var('paged') ) {
			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
				echo __('Page') . ' ' . get_query_var('paged');
				if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
	}
	echo '</div>';
	}
}
 
//上下一页
function xiayiye( $before = '', $after = '', $p = 2 ) {
	if ( is_singular() ) return;
	global $wp_query, $paged;
	$max_page = $wp_query->max_num_pages;
	if ( $max_page == 1 ) return;
	if ( empty( $paged ) ) $paged = 1;
	echo $before.'<div><ul>'."\n";
	//echo '<span>Page: ' . $paged . ' of ' . $max_page . ' </span>';
	if ( $paged > 1 ) p_link( $paged - 1, '上一页', '上一页' );
	//if ( $paged > $p + 2 ) echo ' ';
	//if ( $paged < $max_page - $p - 1 ) echo '... ';
	if ( $paged < $max_page ) p_link( $paged + 1,'下一页', '下一页' );
	echo '</ul></div>'.$after."\n";
}
 
//自动关键词
function auto_keywords() {
	global $s, $post;
	$keywords = '';
	if ( is_single() ) {
		if ( get_the_tags( $post->ID ) ) {
			foreach ( get_the_tags( $post->ID ) as $tag ) $keywords .= $tag->name . ', ';
		}
		foreach ( get_the_category( $post->ID ) as $category ) $keywords .= $category->cat_name . ', ';
		$keywords = substr_replace( $keywords , '' , -2);
	} elseif ( is_home () ) { 
		$keywords = '首页关键词，需要自己填写在这里';
	} elseif ( is_tag() ) { 
		$keywords = single_tag_title('', false);
	} elseif ( is_category() ) { 
		$keywords = single_cat_title('', false);
	} elseif ( is_search() ) { 
		$keywords = esc_html( $s, 1 );
	} else { 
		$keywords = trim( wp_title('', false) );
	}
	if ( $keywords ) {
		echo '<meta name="keywords" content="'.$keywords.'" />\n';
	}
}
 
//自动描述
function auto_description() {
	global $s, $post;
	$description = '';
	$blog_name = get_bloginfo('name');
	if ( is_singular() ) {
		if( !empty( $post->post_excerpt ) ) {
			$text = $post->post_excerpt;
		} else {
			$text = $post->post_content;
		}
		$description = trim( str_replace( array( "\r\n", "\r", "\n", "　", " "), " ", str_replace( "\"", "'", strip_tags( $text ) ) ) );
		if ( !( $description ) ) $description = $blog_name . " - " . trim( wp_title('', false) );
	} elseif ( is_home () ) { 
		$description = $blog_name . " - 首页描述，需要自己填写在这里"; // 首頁要自己加
	} elseif ( is_tag() ) { 
		$description = $blog_name . "有关 '" . single_tag_title('', false) . "' 的文章";
	} elseif ( is_category() ) { 
		$description = $blog_name . "有关 '" . single_cat_title('', false) . "' 的文章";
	} elseif ( is_archive() ) { 
		$description = $blog_name . "在: '" . trim( wp_title('', false) ) . "' 的文章";
	} elseif ( is_search() ) { 
		$description = $blog_name . ": '" . esc_html( $s, 1 ) . "' 的搜索結果";
	} else { 
		$description = $blog_name . "有关 '" . trim( wp_title('', false) ) . "' 的文章";
	}
	$description = mb_substr( $description, 0, 220, 'utf-8' ) . '..';
 
	echo '<meta name="description" content="'.$description.'" />\n';
}
//判断移动设备
function is_mobile() {
	$user_agent = $_SERVER['HTTP_USER_AGENT'];
	$mobile_agents = Array("240x320","acer","acoon","acs-","abacho","ahong","airness","alcatel","amoi","android","anywhereyougo.com","applewebkit/525","applewebkit/532","asus","audio","au-mic","avantogo","becker","benq","bilbo","bird","blackberry","blazer","bleu","cdm-","compal","coolpad","danger","dbtel","dopod","elaine","eric","etouch","fly ","fly_","fly-","go.web","goodaccess","gradiente","grundig","haier","hedy","hitachi","htc","huawei","hutchison","inno","ipad","ipaq","ipod","jbrowser","kddi","kgt","kwc","lenovo","lg ","lg2","lg3","lg4","lg5","lg7","lg8","lg9","lg-","lge-","lge9","longcos","maemo","mercator","meridian","micromax","midp","mini","mitsu","mmm","mmp","mobi","mot-","moto","nec-","netfront","newgen","nexian","nf-browser","nintendo","nitro","nokia","nook","novarra","obigo","palm","panasonic","pantech","philips","phone","pg-","playstation","pocket","pt-","qc-","qtek","rover","sagem","sama","samu","sanyo","samsung","sch-","scooter","sec-","sendo","sgh-","sharp","siemens","sie-","softbank","sony","spice","sprint","spv","symbian","tablet","talkabout","tcl-","teleca","telit","tianyu","tim-","toshiba","tsm","up.browser","utec","utstar","verykool","virgin","vk-","voda","voxtel","vx","wap","wellco","wig browser","wii","windows ce","wireless","xda","xde","zte");
	$is_mobile = false;
	foreach ($mobile_agents as $device) {
		if (stristr($user_agent, $device)) {
			$is_mobile = true;
			break;
		}
	}
	return $is_mobile;
}
 
//统计浏览次数
function getPostViews($postID){
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
		delete_post_meta($postID, $count_key);
		add_post_meta($postID, $count_key, '0');
		return 0;
	}
	return $count;
}
 
function setPostViews($postID) {
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
		$count = 0;
		delete_post_meta($postID, $count_key);
		add_post_meta($postID, $count_key, '0');
	}else{
		$count++;
		update_post_meta($postID, $count_key, $count);
	}
}

3.如果你想把首页的移动端改成移动样式

你首先在index.php顶部添加如下代码

<?php if( !is_mobile() ){ ?>

然后，在index.php底部添加如下代码

<?php } else{ ?>

<?php get_template_part("indexForMobile");?>

<?php } ?>

4.其他页面的移动端样式也是类似修改方法。。如内容页

你首先在single.php顶部添加如下代码

<?php if( !is_mobile() ){ ?>

然后，在sinle.php底部添加如下代码

<?php } else{ ?>

<?php get_template_part("singleForMobile");?>

<?php } ?>

5.小猫只制作了内容页和首页的模板，基本可以满足列表页，tag页，文章，页面，搜索页，首页等页面，如果你的主题有一些特色的模板页面，那靠你自己努力，学长，只能帮你到这里了。

推荐使用SiteGround托管外贸网站

撒哈拉的小猫

没发现国内有哪个IT论坛可以得稿费的，支持WP大学的发展，多多投稿把，欢迎访问小猫博客：blog.clmao.com

相关文章

10 条评论


  4. 这里添加你的代码

    // 移除谷歌字体链接 shoujifans.com
    function aivewp_remove_open_sans_from_wp_core() {
    wp_deregister_style( 'open-sans' );
    wp_register_style( 'open-sans', false );
    wp_enqueue_style('open-sans','');
    }
    add_action( 'init', 'aivewp_remove_open_sans_from_wp_core' );

    // 移除谷歌字体链接 shoujifans.com
    function aivewp_remove_open_sans_from_wp_core() {
    wp_deregister_style( ‘open-sans’ );
    wp_register_style( ‘open-sans’, false );
    wp_enqueue_style(‘open-sans’,”);
    }
    add_action( ‘init’, ‘aivewp_remove_open_sans_from_wp_core’ );

发表评论