无插件为你 WordPress 站点添加移动端样式
如果你想制作手机端如下的样式,那请看本文教材。
特别声明:本教程的样式采集自Mobile Pack移动主题样式,并由小猫进行局部修改,去掉一切JS,并不需要安装之类,只要跟我以下步骤操作即可。效果图(不同手机浏览器端色调可能有所不同):
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页,文章,页面,搜索页,首页等页面,如果你的主题有一些特色的模板页面,那靠你自己努力,学长,只能帮你到这里了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
10 条评论
发表评论
要发表评论,您必须先登录。
使用
singleForMobile移动端内容页空白,PC端正常显示。
不知道列表,其他页面怎么判断?
按照首页和列表做了,但是没有效果,跟首页一样!
用css的自适应不就可以了吗?
比如我们公司网站,做建材的,很多客户用老掉牙浏览器,就没法用自适应了。
这里添加你的代码
// 移除谷歌字体链接 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' );
我想问下,你这个效果图里面出现了南职是指的南昌职业学院吗?
放入顶部出现http500错误怎么解决?
顺藤摸瓜摸到这里
支持潮流猫~
嘿嘿。。你也来投稿玩玩啊