文章
文章商城快讯网址导航
当前位置：首页>WordPress建站>WordPress开发>无插件为你 WordPress 站点添加移动端样式

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

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

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

20140422124313

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

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

//面包屑
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页，文章，页面，搜索页，首页等页面，如果你的主题有一些特色的模板页面，那靠你自己努力，学长，只能帮你到这里了。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
移动设备
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

为自制WordPress主题/插件的后台设置页面添加ajax支持

2014-4-21 8:03:21

WordPress开发

WordPress 使用 smtp 发送评论提醒邮件

2014-4-28 8:44:16

猜你喜欢
10 条回复 A文章作者 M管理员
  1. 战歌

    使用
    singleForMobile移动端内容页空白，PC端正常显示。

  2. 不知道列表，其他页面怎么判断？
    按照首页和列表做了，但是没有效果，跟首页一样！

  3. 用css的自适应不就可以了吗？

    • 比如我们公司网站，做建材的，很多客户用老掉牙浏览器，就没法用自适应了。


  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’ );

  5. 我想问下，你这个效果图里面出现了南职是指的南昌职业学院吗？

  6. 放入顶部出现http500错误怎么解决？

  7. 顺藤摸瓜摸到这里

  8. 支持潮流猫~

    • 嘿嘿。。你也来投稿玩玩啊

❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 微信扫一扫，联系我们

  • 关注微信公众号 WPDAXUE

返回顶部