零基础建站培训介绍

当前位置:

如何制作自适应手机网站

制作自适应手机网站视频教程:https://www.xuewangzhan.net/gonggao/16271.html
如果想让自己做的静态网页与动态程序结合在一起,就必须将静态页面制作成动态模板。
 
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(""); ?>
上一课: 下一课:

发表评论

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

相关教程

  • 学做网站论坛承接全国各地网站制作。 学做网站论坛官网承接各类个人,企业,公司,集团,政府用户网站制作,价格公道,品质保证。
  • 雷擎石油能源有限公司是一家从事研发、生产汽车用润滑油,汽车养护品的细致公司。公司与美国芝加哥石油集团一脉相承,秉承严谨的风格,只为客户提供技
  • 热列祝贺翰典电子公司成功签约合肥睿酷网站制作,由睿酷网络为翰典电子公司制作企业官网,为企业发展添加互联网动力。翰典电子公司是一家细致生产
  • Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的
  • 制作自适应手机网站视频教程:https://www.xuewangzhan.net/gonggao/16271.html如果想让自己做的静态网页与动态程序结合在一起,就必须将静态页
  • 自适应网页制作方法 图文教程 (15153 次浏览)
    自适应网页制作方法特别先想到的是css3的媒体查询 media-screen 控制在不同尺寸下显示。这里说个题外话,css中的像素单位px,是逻辑像素。不是设
  • 网站上引用一些视频,如何让这些视频既支持电脑播放,又支持手机播放,我们可以通过 iframe 调用的方式来解决这个问题。首先让我们来了解一下<
  • 手机网站快速建站方法 图文教程 (16776 次浏览)
    在学做网站论坛的手机建站课程中讲到了如何通过代码方式建网站,今天介绍一个手机网站快速建站方法,通过下面的方法可以快速建立与PC网站同步的手机网
  • 有些刚刚创业的客户在资金或者还没有准备充足营业执照还没办下来的情况下是否可以做网站呢?小编告诉您做网站有没有营业执照都不会有什么影响的,
  • 问题:我想去弄个自己网站,怎么弄简单又快速?其实我做的也比较简单,就想像下面这样的网站就行,自己怎么弄呢?答:耐思尼克-欣为您解