WordPress 进阶:自定义、编辑主题(四)

·  阅读 281

12.png

前言

  • 本文为进阶教程,不建议没有代码基础的进行查看,最好有项目经验,对项目整体有一定认知的;这样才好理解,如果没有,那也没有关系;
  • 主题库里的主题有时候可能满足自己的需求,但是想完全满足还是有点难度,除非你要求不高,或者可以自己改主题的相关代码;
  • 官方主题库:cn.wordpress.org/themes/

编辑主题

  • 进入后台管理页面,打开外观主题编辑器,可以看到主题的所有代码,我是不建议在后台直接编辑源码;但这里是学习;具体如下图所示:

无标题.png

  • 可以看到后台这个主题也是一个项目体,具体介绍可以看readme.txt,我会挑几个主要的进行讲解,简单的比如样式表、CSS、404模板、font、images等就不过多的进行讲解了;

1、页眉

  • 页眉这里可以决定网页的头部怎么展示,还有就是虽然你后台设置了语言插件,但是它自带的页面语言切换按钮很丑,这时候你就可以在这里找到指定的代码进行修改样式;下面的代码是页面展示一级标题的代码,可以看到关键的字段TopNav是不是很熟悉,这跟后台设置时取名字直接挂钩;如下图:
<div class="topnav_container">
  <nav class="navbar navbar-default" role="navigation"> 
    <?php
      wp_nav_menu(array(
      'menu' => 'TopNav',
      'theme_location' => 'primary',
      'depth' => 2,
      'container' => false,
      'menu_class' => 'nav navbar-nav',
      'fallback_cb' => 'wp_page_menu',
      'walker' => new wp_bootstrap_navwalker())
       );
    ?>
  </nav>
</div>
复制代码

无标题.png

注意: 如果你想改造页眉的内容,完全可以在这个文件进行操作,但是切记不要破环原有的代码,对于结构,如果你不够了解,请谨慎修改;

2、首页 Home Template 模板

  • WordPress 主题的灵活在于我们所熟知的模板,其实这里我们能编辑修改得东西很少,但是我们看他代码真的很少,却实现了我们的很多的展示需求,其实我这里使用了后台文章编辑工具WPBakery,这是公司的后台,自己网站如果条件允许可以使用;这个是收费的; 无标题.png

3、子页 Sub Template 模板

  • 子页通用模板,我详细介绍下我自己修改的部份;如下图因为是所有子页面通用模板,通用点在于每一个页面头部对后市一个宽幅图片,图片右边写了当前页面的名称与分类,遇到几个特别页面就要进行改源码;因为插件也无法互相兼容;如下图所示。
  • 懂代码的应该都能看懂点逻辑,如果想详细知道可以学习下PHP语言——"最好的语言"!

思路:想判断当前页面的id,是不是中、英文新闻页面,因为单个页面id唯一;后面根据中英文情况进行判断新闻类型,通过PHParray内置方法按键值对代码进行数据库查到指定的新闻数据;然后对数据进行简单判断,进行循环展示,包括h3包括的年份分类,年份下面展示对应年份的新闻,新闻部份展示 时间、标题、摘要等;

无标题.png

无标题.png

4、ShortCodes 文件

  • 顾名思义就知道这个文件作用就是写一些简码变量,然后可以在其他地方非常方便的引用;如下图:
// Page Title Shortcode
//// Enable Current Year in Visual Composer 

function page_title_shortcode() {
  $title = get_the_title();
  return $title;
}
add_shortcode('page_title', 'page_title_shortcode');
复制代码
  • 下面是新闻片段函数返回的变量,然后赋值给简写变量;下面的代码当然不是我写的,自动生成的,如果有需要我们只是在上面进行修改,如果你对页面有其他简码的需求,你可以在这里自己编辑;

无标题.png

无标题.png

5、模板函数

主题里 functions.php 的作用:
主题设置:一些主题功能应该包含在一个“设置”功能中,最初在您的主题被激活时运行;
导航菜单:自定义导航菜单允许用户在“菜单”管理面板中编辑和自定义菜单,为用户提供了一个拖放界面来编辑其主题中的各种菜单;
加载文本域:通过使您的主题中的字符串可用于翻译,主题可以翻译成多种语言;
发布缩略图: 发布缩略图和精选图片可让您的用户选择一个图片来表示他们的帖子;您的主题可以根据其设计决定如何显示它们;
发布格式:发布格式允许用户以不同的方式格式化其帖子;这对于允许博主根据帖子的内容选择不同的格式和模板非常有用;

6、页脚

  • 页脚部份和页眉类似,下面展示一段我修改过的片段;代码中的实现的功能是后台设置无法实现的,这是支持中英文导致的问题,所以这边我们通过控制代码来争取展示页脚;
// footer 显示控制   中英文控制   logo的跳转链接
if ((document.URL).indexOf('/zh/') > -1) {
  $('.footernav_container').append(`<?php 
    wp_nav_menu( array('menu' => 'zhFooterNav' ));
    wp_nav_menu( array('menu' => 'SocialNav' )); 
  ?>`);
  $('.wp_language_switch a').attr('href', '/').text('English');
  $('.header .svg_link').attr('href', '/zh/zhuye');
}else{
  $('.footernav_container').append(`<?php 
    wp_nav_menu( array('menu' => 'FooterNav' ));
    wp_nav_menu( array('menu' => 'SocialNav' )); 
  ?>`);
  $('.wp_language_switch a').attr('href', '/zh/zhuye').text('简体中文');
  $('.header .svg_link').attr('href', '/');
}
复制代码

总结

本文主要讲解让我们认识了主题的代码结构,以及主题中不同模块不同的作用;想通过简单的说明就想学会开发这个有点困难,如果感兴趣欢迎深究,欢迎一起讨论;

系列文章

WordPress 初步认识(一)
WordPress 主题与基本设置(二)
WordPress 插件得使用与文章的编写(三)

文章中如有错误,请不吝指出,谢谢!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改