如何制作自适应手机网站

WP常用的调用标签：
获取网站名字：

<?php bloginfo('name'); ?>

获取首页路径：

<?php echo get_option('home'); ?>

获取主题存放路径：

<?php bloginfo('template_directory'); ?>

调用当前主题：

<?php the_permalink() ?>

Style.css路径调用：

<?php bloginfo( 'stylesheet_url' ); ?>

1、WP模板分析

1、首页模板-----index.php
2、文章列表页模板------archive.php
3、single内容页模板-------single.php
4、page页面模板-------page.php

2、静态页面转化成WP模板和头部制作

1、WP模板必需的二个文件：style.css   index.php

1-1、style.css添加主题版权信息：

/*

Theme Name: 自适应手机网站

Theme URI: https://www.xuewangzhan.net/baike

Description:自适应手机网站主题

Author: 学做网站论坛

Author URI: https://www.xuewangzhan.net/baike

Version: 1.0

Tags: 自适应手机网站

*/

如果后台乱码，要修改，css 的页面属性，如果网页出现乱码，要修改index.php的页面属性。修改——页面属性——编码。

后台缩略图
在主题文件来下面放一个缩略图图片，缩略图的名字必须是：screenshot.png或者screenshot.jpg

1-2、制作index.php

1-2-1、修改css文件路径
Style.css路径调用：

<?php bloginfo( 'stylesheet_url' ); ?>

1-2-2、修改index.php中的图片的所有相对路径为WP从不路径.  获取主题存放路径：

<?php bloginfo('template_directory'); ?>

1-2-3、分离头部，改用WP调用，调用顶部标签：

<?php get_header();?>

2-1、元信息调用

网站标题：（定义动态标题，不同的页面调用不同的标题）

<title><?php if ( is_home() ) { ?><?php bloginfo('name'); ?><?php } ?>

<?php if ( is_tag() ) { ?><?php single_tag_title(); ?><? $paged = get_query_var('paged'); if ( $paged > 1 ) printf('– 第 %s 页 ',$paged); ?> - <?php bloginfo('name'); ?><?php } ?>

<?php if ( is_page() ) { ?><?php echo trim(wp_title('',0)); ?><?php if (get_query_var('page')) { echo ' - 第'; echo get_query_var('page'); echo '页';}?> - <?php bloginfo('name'); ?><?php } ?>

<?php if ( is_category() ) { single_cat_title(); echo " - "; bloginfo('name'); $paged = get_query_var('paged'); if ( $paged > 1 ) printf('_ 第 %s 页 ',$paged);} ?>

<?php if ( is_single() ) { ?><?php echo trim(wp_title('',0)); ?> - <?php bloginfo('name'); ?><?php } ?>

<?php if ( is_author() ) { ?>文章列表<?php } ?>

<?php if ( is_month() || is_day() ) { ?><?php the_time('Y - F'); ?> - <?php bloginfo('name'); ?><?php } ?>

<?php if (is_search() ) {?>"<?php echo $s; ?>"的搜索结果 - <?php bloginfo('name'); ?><?php } ?>

<?php if (is_404() ) {?>"404页面" - <?php bloginfo('name'); ?><?php } ?>

</title>

<?php if ( is_home() ) { ?>

<meta name="description" content="<?php bloginfo('name'); ?> "/>

<meta name="keywords" content="<?php bloginfo('name'); ?>" />

<?php } ?>

<?php if ( is_single() ) { ?>

<meta name="description" content="<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 80,"……"); ?>" />

<meta name="keywords" content="<?php echo trim(wp_title('',0)); ?>" />

<?php } ?>

HOOK函数：

<?php wp_head(); ?>

2-2、导航菜单制作

菜单选项的生成：
在函数文件functions.php文件中添加以下代码；

//添加菜单功能

if ( function_exists('register_nav_menus')) {register_nav_menus(array('topmenu' => ' 顶部菜单'));}

顶部菜单的调用：

<?php if(function_exists('wp_nav_menu')) wp_nav_menu(array('theme_location' =>'topmenu','container' => false, 'items_wrap' => '%3$s','depth' => 1 )); ?>

顶部空白如何处理

functions.php里面添加下面代码。

add_filter( 'show_admin_bar', '__return_false' );

3、底部制作

分离底部并通过WP标签调用回来，调用底部标签：

<?php get_footer();?>

4、网站首页制作

4-1、幻灯片替换（调用文章中的图片）
1、将以下代码放入functions.php,用于显示缩略图

//缩略图

function get_first_image() {

      global $post;

      $first_img = '';

      ob_start();

      ob_end_clean();

      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

      $first_img = $matches [1] [0];

      if(empty($first_img)){ //Defines a default image

        $first_img = bloginfo('template_url') . "/images/default.jpg";

      };

      return $first_img;

}

2、在images文件夹下，设置一个默认的缩略图：default.jpg
3、后台新建一个换灯片的分类，并且发布三篇以上的文章，带有图片。
循环代码

<?php if (have_posts()) : ?>

<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=3'); ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile;?>

<?php endif; wp_reset_query(); ?>

图片调用：(调用文章中的第一张图片)

<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

标题调用（控制字数）：

<?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?>

标题调用（不控制字数）：

<?php the_title(); ?>

描述调用：

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 60,"……"); ?>

判断第一篇文章：

<?php if ($postcnt == 0) : ?>     <?php endif; $postcnt++; ?>

4-2：最新课程（调用某个分类下的最新文章）

<?php if (have_posts()) : ?>

<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=3'); ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile;?>

<?php endif; wp_reset_query(); ?>

自适应图片的调用：

<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" class="img-responsive center-block" />

链接地址的调用：

<?php the_permalink() ?>

如果图片高度不对称，可以在CSS中控制一下图片高度。

4-3、提交表单的制作（较为复杂）

第一步：在<?php get_header();?>标签上方添加以下代码。（用于验证信息）

<?php

if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send') {

global $wpdb;

$current_url = 'https://www.xuewangzhan.net/'; // 注意修改此处的链接地址

$last_post = $wpdb->get_var("SELECT 'post_date' FROM '$wpdb->posts' ORDER BY 'post_date' DESC LIMIT 1");// 表单变量初始化

$name = isset( $_POST['tougao_authorname'] ) ? trim(htmlspecialchars($_POST['tougao_authorname'], ENT_QUOTES)) : '';

$email = isset( $_POST['tougao_authoremail'] ) ? trim(htmlspecialchars($_POST['tougao_authoremail'], ENT_QUOTES)) : '';

$blog = isset( $_POST['tougao_authorblog'] ) ? trim(htmlspecialchars($_POST['tougao_authorblog'], ENT_QUOTES)) : '';

$title = isset( $_POST['tougao_title'] ) ? trim(htmlspecialchars($_POST['tougao_title'], ENT_QUOTES)) : '';

$category = isset( $_POST['cat'] ) ? (int)$_POST['cat'] : 0;

$content = isset( $_POST['tougao_content'] ) ? trim(htmlspecialchars($_POST['tougao_content'], ENT_QUOTES)) : '';// 表单项数据验证

if ( empty($name) || mb_strlen($name) > 20 ) {

wp_die('姓名必须填写，且长度不得超过20字。<a href="'.$current_url.'">点此返回</a>');

}

if ( empty($email) || strlen($email) > 60 || !preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $email)) {

wp_die('Email必须填写，且长度不得超过60字，必须符合Email格式。<a href="'.$current_url.'">点此返回</a>');

}

if ( empty($title) || mb_strlen($title) > 100 ) {

wp_die('标题必须填写，且长度不得超过100字。<a href="'.$current_url.'">点此返回</a>');

}

if ( empty($content) || mb_strlen($content) > 3000 || mb_strlen($content) < 50) {

wp_die('内容必须填写，且长度不得超过3000字，不得少于50字。<a href="'.$current_url.'">点此返回</a>');

}

$post_content = '<p>姓名: '.$name.'</p><p>Email: '.$email.'</p><p>标题: '.$title.'</p><p>内容:<br />'.$content.'</p>';

$tougao = array(

'post_title' => $title,

'post_content' => $post_content,

'post_category' => array($category)

);

// 将文章插入数据库

$status = wp_insert_post( $tougao );

if ($status != 0) {

wp_die('提交成功！工作人员会尽快与您联系！<a href="'.$current_url.'">点此返回</a>', '提交成功');

}

else {

wp_die('提交失败！<a href="'.$current_url.'">点此返回</a>');

}

}?>

第二步：修改上面代码里的URL地址为自己的地址。
第三步：在表单外面添加<form>标签包裹。

<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; $current_user = wp_get_current_user(); ?>">



</form>

第四步：给表单里的填写框添加 name 属性。

姓名：

name="tougao_authorname"

邮箱：

name="tougao_authoremail"

标题：

name="tougao_title"

内容：

name="tougao_content"

第五步：在提交按钮上方，添加一个隐藏域。

<input type="hidden" value="send" name="tougao_form" />

5、列表页面制作


1、复制列表页，取名为archive.php
2、调用header、sidebar、footer文件

调用头部标签：

<?php get_header();?>

调用底部标签：

<?php get_footer();?>

3、补充完整图片的路径

<?php bloginfo('template_directory'); ?>

4、分类的图片，使用分类的ID号来获取。

<?php global $wp_query;$cat_ID = get_query_var('cat');$category = get_category($cat_ID);echo $category->cat_ID; ?>

5、分类名称的调用

<?php wp_title('');?>

6、分类描述的调用

<?php echo category_description(); ?>

7、循环调用文章

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile; ?>

<?php endif; ?>

标题调用：

<a href="<?php the_permalink() ?>"> <?php the_title() ?></a>

浏览量调用
1、将下的代码放置到自己网站主题的functions.php中.

/*显示文章浏览次数*/

function getPostViews($postID){

$count = get_post_meta($postID,'views', true);

if($count==''){

delete_post_meta($postID,'views');

add_post_meta($postID,'views', '0');

return "0";

}

return $count.'';

}

function setPostViews($postID) {

$count = get_post_meta($postID,'views', true);

if($count==''){

$count = 0;

delete_post_meta($postID,'views');

add_post_meta($postID,'views', '0');

}else{

$count++;

update_post_meta($postID,'views', $count);

}

}

2、在需要显示浏览数的位置，使用以下代码调用。

<?php setPostViews(get_the_ID()); ?><?php echo number_format(getPostViews(get_the_ID())); ?>

8、分页导航的调用

1、将以下代码放在functions.php中

//分页

function kriesi_pagination($query_string){

global $posts_per_page, $paged;

$my_query = new WP_Query($query_string ."&posts_per_page=-1");

$total_posts = $my_query->post_count;

if(empty($paged))$paged = 1;

$prev = $paged - 1;

$next = $paged + 1;

$range = 2; // only edit this if you want to show more page-links

$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);

if(1 != $pages){

echo "<nav aria-label='Page navigation' class='text-center'><ul class='pagination'>";

echo ($paged > 1 && $showitems < $pages)? "<li><a href='".get_pagenum_link(1)."'><span>特别前</span></a></li><li><a href='".get_pagenum_link($prev)."' aria-label='Previous'><span aria-hidden='true'>«</span></a></li>":"";

for ($i=1; $i <= $pages; $i++){

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){

echo ($paged == $i)? "<li class='active'><a>".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";

}

}

echo ($paged < $pages && $showitems < $pages) ? "<li><a href='".get_pagenum_link($next)."' aria-label='Next'><span aria-hidden='true'>»</span></a></li>" :"";

echo ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) ? "<li><a href='".get_pagenum_link($pages)."'><span>最后</span></a></li>":"";

echo "</ul></nav>\n";

}

}

2、使用以下代码调用分页导航

<?php kriesi_pagination($query_string); ?>

9、最新文章

<?php $rand_posts = get_posts('numberposts=10&orderby=date');foreach($rand_posts as $post) : ?>



<?php endforeach;?>

缩略图调用

<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>"/>

标题调用（带链接）

<a href="<?php the_permalink() ?>"> <?php the_title(); ?></a>

如果出现图片高度不一致的情况，可以在CSS中控制一下图片的高度。

6、文章内容页面制作

1、制作single.php
2、调用header、sidebar、footer文件

调用头部标签：

<?php get_header();?>

调用底部标签：

<?php get_footer();?>

所属分类：

<?php the_category(', ') ?>

3、循环调用文章(一定不要忘了放循环代码）

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile; ?>

<?php endif; ?>

标题：

<?php the_title(); ?>

内容：

<?php the_content(""); ?>

上一篇调用：

<?php echo get_permalink( get_previous_post()->ID ); ?>

下一篇调用：

<?php echo get_permalink( get_next_post()->ID ); ?>

4、调用同分类下的其它文章（相关文章）

<?php

$cats = wp_get_post_categories($post->ID);

if ($cats) {

$args = array(

        'category__in' => array( $cats[0] ),

        'post__not_in' => array( $post->ID ),

        'showposts' => 20,

        'caller_get_posts' => 1

    );

query_posts($args);

if (have_posts()) :

while (have_posts()) : the_post(); update_post_caches($posts); ?>



<?php endwhile ?>

<?php endif; wp_reset_query(); } ?>

标题

<?php the_title(); ?>

链接

<?php the_permalink(); ?>

7、page页面制作

1、制作page页面，复制page.html,重命名为page.php
2、调用头部，底部
3、循环代码

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile; ?>

<?php endif; ?>

4、标题

<?php the_title(); ?>

5、内容

<?php the_content(""); ?>