学做网站培训课程介绍

当前位置：

WordPress手机网站模板怎么做

本课程视频是VIP会员课程，学习请进入VIP学习区。

我们知道，WordPress建网站时，它的前台主要是通过网站模板来控制的。手机网站也是一样，所以我们要使用Wordpress建一个手机网站，需要先制作一个手机网站模板。

以下是Wordpress手机网站模板制作教程文档，也欢迎大家学习学做网站论坛的手机网站制作课程。

第一节：WP手机网站模板分析

1、WP手机模板的必须文件 ：index.php、style.css；

2、WP手机模板版权的添加

用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

*/

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

第二节：WP手机顶部模板制作

1-2、制作index.php

1-2-1、修改css文件路径：Style.css路径调用：<?php bloginfo( 'stylesheet_url' ); ?>

1-2-2、修改index.php中的图片的所有相对路径为WP路径
获取主题存放路径：<?php bloginfo('template_directory'); ?>
如果还出现有些图片不显示的话，要修改style.css中的路径，因为这是的style.css是从images文件夹中拿出来的，路径已经改变了。

分离头部，改用WP调用，调用顶部标签：<?php get_header();?>

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, ) ); ?>

第三节、WP手机模板底部制作

通过WP标签调用回来，调用底部标签：<?php get_footer();?>

手机模板版权信息调用：



Copyright © 2012<a href=" http://www..aiwangxue.com"> 学做网站论坛</a>

第四节、WP手机网站首页模板制作

首页PHP循环代码：



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

<?php while (have_posts()) : the_post(); ?></p><p><?php endwhile;?>

<?php endif; ?></p>

标题调用：



<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," ……");?>

手机站缩略图调用操作步骤：

1-1、新建函数文件functions.php 放入以下代码：



<p>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;

}</p><p> </p>

1-2、图片的调用：



<?php echo get_first_image(); ?>

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

手机站浏览量的调用

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代码去调用浏览量：



<?php setPostViews(get_the_ID()); ?>

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

第五节、WP手机站分类页面模板制作

1、制作archive.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; ?>

标题调用：



<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(__( '&laquo; Previous', 'zipe')); ?></div>

<div class="nav-next"><?php next_posts_link(__( 'Next &raquo;', 'zipe')); ?></div>

</nav>

<?php endif; ?>

第六节、WP手机站内容页面模板制作

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('&laquo; %link'); ?>

下一篇调用：



<?php next_post_link('%link &raquo;'); ?>





<?php if (get_previous_post()) { previous_post_link(‘上一篇: %link’);} else {echo “没有了，已经是最后文章”;} ?>

<?php if (get_next_post()) { next_post_link(‘下一篇: %link’);} else {echo “没有了，已经是最新文章”;} ?>

发表评论

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111438 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发，自己比较喜欢。注意：此模板不支持IE6,
  • 用什么建网站？Wordpress建网站好不好 (110906 次浏览)
    用什么建网站？Wordpress建网站好不好？这些问题经常被新手问上问起。可以这样说，wordpress程序可以建各种类型的网站，它的功能强大之处令人称赞，
  • Wordpress 如何开启伪静态 视频教程 (1120194 次浏览)
    做网站制作好之后，如果网站做SEO优化时，需要进行伪静态的设置，同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpr
  • 什么是自适应手机网站 视频教程 (1104254 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 学完手机站课程，自己做的自适应网站 图文教程 (17041 次浏览)
    老师你好，我前几天一直在学习手机站课程，对于课程中的案例网站特别喜欢，自己就跟着课程一步步做了一遍。也做了课程笔记，感觉学到了很多知识。
  • 手机Mobi域名怎么注册和解析 图文教程 (125569 次浏览)
    什么是手机域名手机域名又叫Mobi域名。Mobi是被ICANN批准，并致力于将internet内容传送到移动装置，例如智能电话，PDA，手机等的专属域名
  • 自己做的模板阁网站 图文教程 (17238 次浏览)
    这是我学习了论坛课程后自己做的一个模板阁网站，这款自己做网站的主题个人DIY成纯主题下载站，可以通过填加自定义字段demo、down、thumbnails来分别
  • 仿站长网admin5主题模板 图文教程 (17309 次浏览)
    这是一款模板站长网admin5的wordpress主题模板,这个模板综合了门户和企业网站所有特点,内容特别丰富,而且有大量的广告位可供站长放广告图片,实现网站
  • 一个非常漂亮的企业网站通用模板 图文教程 (17048 次浏览)
    这个企业模板综合了企业网站的所有必需因素,如公司简介,幻灯片，产品展示,以及大量的产品分类展示，在线留言,产品循环展示等,基本上能满足公司企业网

相关教程

其它教程