零基础学做网站培训介绍

当前位置:

怎么制作手机网站,响应式手机网站制作

课程目标:制作出一个手机网站。课后作业,跟着视频课程,完成一个响应式手机网站。

手机网站制作流程,怎么做手机网站

响应式手机网站制作步骤文档

以下是学做网站论坛关于响应式手机网站制作步骤文档,相关视频教程:自适应手机网站制作课程

1、手机网站模板文件分析

  • index.php首页模板
  • Style.css  模板样式表
  • archive.php分类模板
  • page.php  页面模板
  • single.php文章模板
  • header.php头部模板
  • footer.php底部模板
  • Comments.php评论模板

2、手机网站版权添加

用DW打开style.css,添加主题版权信息:


/*

Theme Name: 学做网站论坛
Theme URI: https://www.xuewangzhan.net
Description:学做网站论坛手机网站
Author: 学做网站论坛
Author URI: https://www.xuewangzhan.net
Version: 1.0
Tags: white, blog,学做网站论坛, blue
*/

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

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

2-1、手机网站元信息调用


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php if(stripos($_SERVER["HTTP_USER_AGENT"],"MSIE")) { ?>
<!--[if lt IE 9]><script type="text/javascript">(function(){if(!/*@cc_on!@*/0)return;var e = "article,aside,footer,hgroup,header,nav,section,time".split(','),i=0,length=e.length;while(i<length){document.createElement(e[i++])}})();</script><![endif]-->
<?php } ?>
<?php
if ( is_singular() && comments_open() ) {
wp_enqueue_script( 'comment-reply' );
wp_enqueue_script('jquery');
}
?>
</head>

2-2、网站目录导航制作


<?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

3、手机站底部制作

手机网站底部通过WP标签调用回来,调用底部标签:


<?php get_footer();?>

版权信息:


Copyright © 2022<a href=" http://www..xuewangzhan.net"> 学做网站论坛</a>

4、手机网站首页制作

1、手机网站首页PHP循环代码1


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

<?php endwhile;?>
<?php endif; ?>

手机网站文章标题调用:


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

手机网站分类的名称:


<a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a>

手机网站摘要调用:


<?php echo mb_strimwidth(strip_tags(get_the_content()),0,80," ……");?>

2、手机网站缩略图调用操作步骤:

2-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-2、图片的调用:


<?php echo get_first_image(); ?>

2-3、在images文件夹下建一个默认图片:default.jpg

3、手机网站浏览量的调用

3-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);
}
}

3-2、使用以下PHP代码去调用浏览量:


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

5、手机站列表页面制作

1、制作archive.php页面

2、调用header、sidebar、footer文件

3、循环调用文章


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

<?php endwhile; ?>
<?php endif; ?>

标题调用:


<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

日期调用:


<?php the_date_xml()?>

分类名字调用:


<?php wp_title('');?>

日期调用:


<?php the_date_xml()?>

图片的调用:


<img src="<?php echo get_first_image(); ?>" width="90px" height="70px"/>

调用浏览量:


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

4、手机网站分页功能制作

在页面底部放上以下代码:


<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="nav-below" class="clear">
<div class="nav-previous"><?php previous_posts_link(__( '« Previous', 'zipe')); ?></div>
<div class="nav-next"><?php next_posts_link(__( 'Next »', 'zipe')); ?></div>
</nav>
<?php endif; ?>

6、手机网站文章内容页面制作

1、制作single.php

2、调用header、sidebar、footer文件

调用头部标签:


<?php get_header();?>

调用底部标签:


<?php get_footer();?>

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


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

<?php endwhile; ?>
<?php endif; ?>

标题:


<?php the_title(); ?>

内容:


<?php the_content(""); ?>

4、手机网站文章页元信息调用

日期调用:


<?php the_date_xml()?>

分类目录:


 <?php the_category(', ') ?>

上一片,下一片代码直接粘贴到相应显示的位置就可以了。

上一篇调用:


<?php previous_post_link('« %link'); ?>

下一篇调用:


<?php next_post_link('%link »'); ?>

相关课程:

以下是学做网站论坛 手机网站制作视频教程:https://www.xuewangzhan.net/vip/forum.php?gid=36

自适应手机网站制作课程[550元]

自适应手机框架Bootstrap基础知识
本课课节: 13节, 学员回复: 12130次

自适应手机框架Bootstrap组件
本课课节: 10节, 学员回复: 11136次

自适应手机框架Bootstrap JS插件
本课课节: 11节, 学员回复: 12192次

自适应手机网站首页开发
本课课节: 11节, 学员回复: 13178次

网站动画载入功能制作
本课课节: 10节, 学员回复: 13764次

自适应手机网站列表页开发
本课课节: 8节, 学员回复: 13129次

自适应手机网站内容页开发
本课课节: 8节, 学员回复: 11586次

自适应手机网站动态首页模板开发
本课课节: 7节, 学员回复: 12172次

自适应手机网站动态列表模板开发
本课课节: 7节, 学员回复: 13104次

自适应手机网站动态内页模板开发
本课课节: 11节, 学员回复: 13255次

相关阅读:

手机网站和APP的区别是什么

如何制作网站同步的手机APP客户端

自适应手机网站制作课程已发布

发表评论

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