如果你想制作手机端如下的样式,那请看本文教材。
特别声明:本教程的样式采集自Mobile Pack移动主题样式,并由小猫进行局部修改,去掉一切JS,并不需要安装之类,只要跟我以下步骤操作即可。效果图(不同手机浏览器端色调可能有所不同):
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'; } //判断<a href="https://www.wpdaxue.com/tag/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87" title="查看与【移动设备】相关的文章" target="_blank" rel="noopener">移动设备</a> 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页,文章,页面,搜索页,首页等页面,如果你的主题有一些特色的模板页面,那靠你自己努力,学长,只能帮你到这里了。
来源:
https://www.wpdaxue.com/add-mobile-style.html