零基础建站培训介绍

当前位置:

如何制作自适应手机网站

如果想让自己做的静态网页与动态程序结合在一起,就必须将静态页面制作成动态模板。
 
1、先启动本地环境
2、下载wordpress程序并进入本地安装。下载地址:https://pan.baidu.com/s/1slC3ZNR
3、按照下面的步骤制作动态网站
 

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(""); ?>
 
手机主题插件下载: wp-mobile-themes.zip (31.71 KB, 下载次数: 1421)
 
课程中做好的自适应动态网站模板下载: bootstrap.rar (1.18 MB, 下载次数: 1415)

相关阅读:

CSS3自适应布局与Media Queries

手机网站快速建站方法

如何让手机网站上二维码能够长按识别

自适应网页制作方法

下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注