無(wú)插件為你 WordPress 站點(diǎn)添加移動(dòng)端樣式

撒哈拉的小貓

如果你想制作手機(jī)端如下的樣式，那請(qǐng)看本文教材。

特別聲明：本教程的樣式采集自Mobile Pack移動(dòng)主題樣式，并由小貓進(jìn)行局部修改，去掉一切JS，并不需要安裝之類，只要跟我以下步驟操作即可。效果圖（不同手機(jī)瀏覽器端色調(diào)可能有所不同）：

1.先下載所需文件（本站下載 | 百度網(wǎng)盤下載密碼：9col），里面有5個(gè)文件，一共15KB而已。把這5個(gè)文件放在你主題根目錄下面。

2.在function.php追加這些方法。可能你的主題已經(jīng)有先某些函數(shù)了，那你可以不用加那些已經(jīng)存在的函數(shù)

//面包屑
function fairy_breadcrumbs() {
	$delimiter = '?';
	$home = '首頁(yè)'; 
	$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>';
	}
}

//上下一頁(yè)
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, '上一頁(yè)', '上一頁(yè)' );
	//if ( $paged > $p + 2 ) echo ' ';
	//if ( $paged < $max_page - $p - 1 ) echo '... ';
	if ( $paged < $max_page ) p_link( $paged + 1,'下一頁(yè)', '下一頁(yè)' );
	echo '</ul></div>'.$after."\n";
}

//自動(dòng)關(guā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 = '首頁(yè)關(guān)鍵詞，需要自己填寫在這里';
	} 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';
	}
}

//自動(dòng)描述
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 . " - 首頁(yè)描述，需要自己填寫在這里"; // 首頁(yè)要自己加
	} elseif ( is_tag() ) { 
		$description = $blog_name . "有關(guān) '" . single_tag_title('', false) . "' 的文章";
	} elseif ( is_category() ) { 
		$description = $blog_name . "有關(guān) '" . single_cat_title('', false) . "' 的文章";
	} elseif ( is_archive() ) { 
		$description = $blog_name . "在: '" . trim( wp_title('', false) ) . "' 的文章";
	} elseif ( is_search() ) { 
		$description = $blog_name . ": '" . esc_html( $s, 1 ) . "' 的搜索結(jié)果";
	} else { 
		$description = $blog_name . "有關(guān) '" . trim( wp_title('', false) ) . "' 的文章";
	}
	$description = mb_substr( $description, 0, 220, 'utf-8' ) . '..';
	
	echo '<meta name="description" content="'.$description.'" />\n';
}
//判斷移動(dòng)設(shè)備
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;
}

//統(tǒng)計(jì)瀏覽次數(shù)
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.如果你想把首頁(yè)的移動(dòng)端改成移動(dòng)樣式

你首先在index.php頂部添加如下代碼

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

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

<?php } else{ ?>

<?php get_template_part(“indexForMobile”);?>

<?php } ?>

4.其他頁(yè)面的移動(dòng)端樣式也是類似修改方法。。如內(nèi)容頁(yè)

你首先在single.php頂部添加如下代碼

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

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

<?php } else{ ?>

<?php get_template_part(“singleForMobile”);?>

<?php } ?>

5.小貓只制作了內(nèi)容頁(yè)和首頁(yè)的模板，基本可以滿足列表頁(yè)，tag頁(yè)，文章，頁(yè)面，搜索頁(yè)，首頁(yè)等頁(yè)面，如果你的主題有一些特色的模板頁(yè)面，那靠你自己努力，學(xué)長(zhǎng)，只能幫你到這里了。

聲明：本站所有文章，如無(wú)特殊說(shuō)明或標(biāo)注，均為本站原創(chuàng)發(fā)布。任何個(gè)人或組織，在未征得本站同意時(shí)，禁止復(fù)制、盜用、采集、發(fā)布本站內(nèi)容到任何網(wǎng)站、書籍等各類媒體平臺(tái)。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。

給TA打賞

共{{data.count}}人

人已打賞

移動(dòng)設(shè)備

歡迎關(guān)注WordPress大學(xué)公眾號(hào) WPDAXUE

WordPress開(kāi)發(fā)

為自制WordPress主題/插件的后臺(tái)設(shè)置頁(yè)面添加ajax支持

2014-4-21 8:03:21

WordPress開(kāi)發(fā)

WordPress 使用 smtp 發(fā)送評(píng)論提醒郵件

2014-4-28 8:44:16

10 條回復(fù) A文章作者 M管理員

更換刪除

戰(zhàn)歌 學(xué)前班lv0

18年10月26日

使用
singleForMobile移動(dòng)端內(nèi)容頁(yè)空白，PC端正常顯示。
longweisa Guest

15年2月3日

不知道列表，其他頁(yè)面怎么判斷？
按照首頁(yè)和列表做了，但是沒(méi)有效果，跟首頁(yè)一樣！
wuchouchou Guest

15年1月2日

用css的自適應(yīng)不就可以了嗎？
- 哈嘍沃德@wuchouchou 學(xué)前班lv0
  
  15年12月22日
  
  比如我們公司網(wǎng)站，做建材的，很多客戶用老掉牙瀏覽器，就沒(méi)法用自適應(yīng)了。
好玩 Guest

14年6月12日

這里添加你的代碼// 移除谷歌字體鏈接 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’ );
曉午林楓 Guest

14年5月23日

我想問(wèn)下，你這個(gè)效果圖里面出現(xiàn)了南職是指的南昌職業(yè)學(xué)院?jiǎn)幔?/p>
悠悠谷 blog Guest

14年5月20日

放入頂部出現(xiàn)http500錯(cuò)誤怎么解決？
小二苘 Guest

14年4月30日

順藤摸瓜摸到這里
ｃｙ Guest

14年4月25日

支持潮流貓~
- 撒哈拉的小貓A@ｃｙ 小學(xué)生lv1
  
  14年4月25日
  
  嘿嘿。。你也來(lái)投稿玩玩啊

1

Cimo：一款在瀏覽器端壓縮和轉(zhuǎn)換為 WebP 圖片的WordPress插件
2月5日
2

FluentCart 微信支付網(wǎng)關(guān)插件：WPKJ Payment Gateway for FluentCart with WeChat
25年11月24日
3

FluentCart 支付寶付款網(wǎng)關(guān)插件：WPKJ Payment Gateway for FluentCart with Alipay
25年10月23日
4

FluentCart：優(yōu)秀的WordPress商城插件，最有希望替代WooCommerce和EDD
25年10月23日
5

使用 Captcha for WordPress 攔截垃圾郵件/評(píng)論/表單提交
25年8月31日