【wordpress】wordpress自己制作主题看这一篇就够了/常用函数/注意事项

wordpress自己制作主题看这一篇就够了/常用函数/注意事项

一.介绍

想必想要大家都要自己制作主题了，也是对wordpress有点了解了，在这里我就不多废话了。
有不了解的欢迎大家看我wordpress的文章
第一期安装以及大致使用
第二期wordpress常用插件（最全）

二.主题制作大致过程以及常见问题及解决方法

1. 在wp-content\themes下创建主题文件夹

2. 在刚才创建的文件夹下新建以下三个文件index.php,style.css,screenshot.png
   
   在此过程中可能遇到的问题：
   （1）, 自己的主页文件是html格式的
   报错：

   模板丢失。独立主题需要有index.php模板文件，子主题必须在
   style.css样式表中包含模板头部。
   

   解决方法：你主题页面的文件格式必须是php格式的（也就是后缀名必须 是php）
   （2）.在跟主页页面同级的文件夹内没有style.css,或者说样式文件名不为style.css
   报错：

   缺少样式表。
   

   解决方法：你需要把你的样式文件移动到和主页页面文件在同一级的文件夹内。或者样式文件名字改为style.css

   （3）.没有screenshot.png文件
   当然这个文件对于你自己用你自己开发的主题的时候来说是可有可无的，但是如果是给别人用就一定要加上，它表示你主题的大概样子，可以让客户一眼就可以看出什么样子。
   差别：
   

3. 点击启用主题
   启用主题后可能遇到的问题:
   （1），自己原来页面里面本来有的图片，js，css和使用到的插件都在控制台中报错（404），如图所示：
   
   这个时候就要用到php中一些常用的函数了

<?php get_header(); ?> ：	调用Header模板
<?php get_footer(); ?> ：	调用Footer模板
<?php bloginfo('html_type'); ?> ：	网页Html类型
<?php bloginfo('charset'); ?> ：	网页编码
<?php bloginfo('name'); ?> ：	博客名称（Title）
<?php bloginfo('url'); ?> ：	博客 Url
<?php bloginfo('description'); ?> ：	博客描述
<?php bloginfo('stylesheet_url'); ?>:	CSS文件路径
<?php bloginfo('template_url'); ?> ：	模板文件路径

如图所示：插入到原有路径前面，不用删除或修改原有路径，这样就可以解决这个问题了

4.wordpress导航菜单（不那么重要可以跳过）

导航菜单是每一个WordPress主题必须的元素，如果你要制作一个WordPress主题，那就必须熟悉WordPress导航菜单注册函数 register_nav_menus() 和导航菜单调用函数 wp_nav_menu() ，这两个参数一般都是配合使用的。

在主题的 functions.php 中添加：
register_nav_menus(array(
‘header_menu’ => ‘顶部菜单’,
‘footer_menu’ => ‘页脚菜单’,
));
上面的代码注册了两个代码，其中 ‘header_menu’ 和 ‘footer_menu’ 分别是这两个菜单的“键key”，而后面的 ‘顶部菜单’ 和 ‘页脚菜单’ 是对这个菜单的描述，会在 外观 - 菜单 中显示出来。下文将会图例说明。
按照上面的结构，就可以注册多个菜单。
在仪表盘中修改菜单

导航菜单调用函数 wp_nav_menu() 介绍
自定义导航菜单调用函数，可用来调用 register_nav_menus() 注册的菜单。

<?php
$data = array(
	'container'       => 'div',		//父元素
	'container_class' => 'header_menu_wrap',		//父元素class
	'container_id'    => '',		//父元素id
	'menu_class'      => 'header_menu',	//导航ul节点class
	'menu_id'         => ''		//导航ul节点id
);
wp_nav_menu( $data);
?>

输出的HTML结构如下：
自定义导航菜单调用函数，可用来调用 register_nav_menus() 注册的菜单。

<div id="menu_left" class="header_menu_wrap">
  <ul class="header_menu">
    <li><a href="https://www.test.com">首页</a></li>
    <li><a href="https://www.test.com/news">WP资讯</a></li>
    …………
  </ul>
</div>

接下来我们就可以根据这个 id 来写css美化菜单的显示效果了。

---

//制作不易，客官临走不得点个赞👍，好让更多人看到！