wordpress在NANA主题下制作个性化全屏页面模板

付涛纪实阁 WP教程与插件 2018年3月5日 百度已收录

946 1 0

程序：WordPress 4.9.4

主题：采用懿古今NANA主题

文章背景：NANA主题自身在页面风格里面为用户提供了template-full.php全屏模板，但是此模板所为谓的全屏只是中间部分，并未真正意义上的全屏；在实际使用中，因为部分用户的部分需求，会需要直接意义上的全屏效果模板；

【NANA主题默认全屏】

【新增修正后的全屏效果】

效果预览请点击：企业网站建设

重新创建头部文件

因为默认的header.php文件里面包括了以下部分：

将主题模板根目录下的header.php复制一份，并通过notepad++或其它编辑器（不建议使用系统自带的记事本，会导致文件出现莫名其妙的问题），找到以下代码：

<?php if (is_home()) { ?>
<?php if (!get_option('ygj_ggl_kg')) {?>
<nav class="breadcrumb" style="height:1px;line-height:1px;"></nav>
<?php }else{?>
<nav class="breadcrumb">
<div id="scrolldiv">
<div class="bull"></div>
<div class="scrolltext">
<ul style="margin-top: 0px;">
<?php echo stripslashes(get_option('ygj_ggl_nr')); ?>
</ul>
</div>
</div>
<script type="text/javascript">$(document).ready(function() {$("#scrolldiv").textSlider({line: 1, speed: 1000,
timer: 3000});})</script>
</nav>
<?php } ?>
<?php }else{the_crumbs(); }?>

找到以上代码，并删除；然后保存为：header-full.php，上传至主题根目录下；

在原主题模板里面随便选择一个原始模板如：template-full.php，并打开，将其中的所有代码删除并用以下代码替换保存为以template-all-full.php的文件（文件名可自定义）；

<?php
/*
Template Name: 全屏100%尺寸页面模板
*/
?>
<?php include("header-full.php"); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '<div class="page-links">', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span><i class="fa fa-angle-left"></i></span>', 'nextpagelink' => "")); ?><?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
<?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => '<span><i class="fa fa-angle-right"></i></span>')); ?>
<?php if (get_option('ygj_taobaoym') == '显示') { get_template_part('/inc/taobao'); } ?>
<?php if (get_option('ygj_g_full') == '显示') { get_template_part( 'inc/ad/ad_full' ); } ?>
<?php endwhile; ?>
<?php get_footer();?>