wordpress自定义主题完成后无法保存
WP菜鸟建站17：wordpress主题的导航菜单怎样设置？
一般情况下，每一个网站都会有自己的头部导航菜单，wordpress网站也是一样。在我们为wordpress网站安装好主题后，主题一般都会提供这种菜单导航功能，当然，也有一些极少数的极个性的主题，它没有菜单功能，而是把导航菜单写死了，不需要我们在wordpress网站的后台对它进行设置。但是，作为一个合格的wordpress主题开发者，是一定要为自己的主题添加导航菜单功能的。那么，我们怎样设置wordpress网站的导航菜单呢？
第一步、进入wordpress导航菜单的设置页面。
进入到wordpress网站后台后，找到左侧的“外观”，点击它，这里我们可以看到它的下方有一个“菜单”选项。点击这个“菜单”，右侧内容栏会展示菜单设置页面。
第二步、创建一个菜单。
在我们还没有创建菜单的时候，左侧的“添加菜单项”的选项们是灰色的。右侧是创建菜单表单。如下图：
我们在右侧的“菜单结构”中填写“菜单名称，然后保存，就创建好了一个菜单。只是还是一个没有任何内容的菜单。如下图：
第三步、为这个菜单添加菜单项。
我们要为这个创建好的空菜单添加菜单项，所以，我们要从左侧的“添加菜单项”勾选一些选项添加到这个空菜单中。
1、添加“首页”菜单项。
点击展开左侧的“自定义链接”，填写“首页”链接的URL地址，再填写“链接文本”，这里我们填写的是“首页”这两个字。如下图：
再点击“添加到菜单”按钮，就添加到右侧的空菜单中，如下图：
2、添加“分类目录”。
点击展开左侧菜单项中的“分类目录”，我们先勾选“瘦腿、瘦腰、瘦脸”，
然后点击“添加到菜单”按钮，这几个分类目录名就添加到右侧的空菜单中了，如下图：
第四步、保存菜单。
给空菜单添加好菜单项后，我们再给这个菜单勾选在前面页面显示的位置（有的主题没有这个选项），比如：我们这里勾选了“第一导航菜单”（如下图），
?然后点击“保存菜单”，这样，我们就创建成功一个wordpress导航菜单。当然，一个wordpress主题一般不会只有一个导航菜单，除了头部菜单外，还有底部导航菜单，也有可能会有侧边导航或移动端导航菜单。这要看wordpress主题开发者是怎样设想的了。好了，wordpress导航设置就介绍到这里，谢谢参阅。
WP主题开发02：wordpress主题开发流程
任何企业，在生产产品时，都会有一个操作流程或生产流程。比如服装企业，他们会首先通过时装设计师设计出服装样式效果图片，然后，会叫工厂的打板人员根据设计图来打出一个样板，接着会放到工厂里，让服装工人根据板样来制作服装，制作好后，还会对服装进行熨烫、绞边等等操作。我们开发wordpress主题模板，同样也是需要有一个流程的，尤其是IT公司里团队开发时。流程的好处是：可以让不同特长的员工分工合作，达到最好的效率。
下面，我们一起来看看wordpress主题开发的流程有哪些吧。
第一步：美工设计wordpress主题模板的效果图。
在我们开发wordpress主题模板前，我们需要先知道，这个模板到底长得是一个什么样子，也就是说，我们的开发，要有一个目标，然后按着这个目标来进行一步一步地开发。当然，我们可以通过文本来描述网站的样子。但是最直观的，当然是网站的效果图了。
?通过效果图，我们就知道这个网站长成什么样子，头部是什么个样子，底部是个什么样子，中间主体又是个什么样子，这些都可以一目了然。在企业里，一般都会由美工去设计这个效果图。如果是个人的话，如果懂平面设计软件，也是可以轻松弄出来的。我们常用来设计的软件一般是photoshop。当然，也有其它的绘图软件。
第二步：对效果图进行切图操作。
wordpess主题的效果图设计好后，我们接下来就要对它进行切图的操作。其实，就我个人而言，在常规开发中，这个切图步骤是可有可无的。对于一个wordpress主题开发的高手来说，他们也许只需要看着效果图来开发就可以了。当然，对IT企业来说，切图还是有必要的，因为把效果图切成小图后，前端就可以直接把这些小图放到前端页面上展示，可以直观地让客户看到效果。切图软件的选择，我们可以选择photoshop来进行，photoshop就带有切刀工具。
第三步：根据效果图编写静态模板。
切完图后，我们就进入到第三个流程——编写静态模板。wordpress主题的静态模板编辑是一个必须的流程，这个过程是逃不掉的。这个流程中，我们会把切图切下来的小图片，通过HTML代码来进行组合布局，达到第一步中的效果图的效果。这样，我们就可以在浏览器中观看到它的网页版的效果了。静态模板虽然不是真正意义上的wordpress主题模板，但是，它已经让网站的轮廓可以通过浏览器就可以查看，这样，我们就可以把模板的静态展示，给客户观看，提出意见。然后不断完善，达到客户的需求。
第四步：把静态模板转换成wordpress动态模板。
这一步是正式把效果图演变成真正的wordpress主题模板。在我们做好了静态模板后，我们就可以根据它的布局，来使用wordpress程序所提供的函数来调用数据库中的数据，让前端的页面的数据不再是死数据——一成不变。我们的网站需要的是，只要后台发表了文章，后台的数据就要做出相应的变化，这就是动态网站优势。如：顶部导航菜单，我们就可以在后台进行设置，然后，在wordpress主题的动态模板中，通过 wp_nav_menu()函数来调用，就可以在前台页面的顶部展现。
第五步：安装动态模板到网站。
一般情况下，我们都会在本地电脑中，一边开发wordpress动态模板，一边对它进行测试。所以，在我们写完wordpress动态模板后，我们对它的测试工作也同时完成了。当然，你仍然可以在本地环境中对它进行多次的测试。
这时，我们可以直接在我们的服务器上的网站上来安装我们开发好的wordpress主题模板了。安装wordpress主题很简单，可以通过2种方式来安装：1、直接通过FTP软件把我们开发好的wordpresss主题模板文件上传到网站根目录下的/wp-content/themes/ 目录下；2、也可以先把wordpress主题模板的所有文件压缩成一个zip后缀的压缩文件，然后在wordpress网站后台的主题菜单中去上传安装。如果正确安装wordpress主题，可以参阅锐锋堂相关的文章，里面有详细的解说。
通过上面的介绍，我们了解到，我们在开发wordpress主题模板时，全经哪几个流程。只要我们按照这个流程来认真操作，就会有效减少出错的机率。就算出现错误，我们也可以在最短的时间内，找到是在哪个流程中出现了错误，对于企业来说，就很容易找到出错的当事人，就可以有针对性地进行修补，可见，开发流程还是非常重要的。
真香，30天做一套wordpress主题（第2天）：吃透主题设置
欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是（没有蛀牙！）建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. HTML/CSS/JS基础
2. PHP基础
3. 如何使用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
直奔主题新版的wordpress增加了自定义主题设置的功能，并且官方也推荐开发者把相关的设置放到主题自定义里。默认的情况下，主题会自动开启一些自定义参数（即使我们的主题还没有使用它们）：
我们在主题文件夹下建立一个functions.php文件，这个文件会影响到主题的方方面面，首先我们建立自定义的主题参数连接：
// Customizerfunction my_customize_register($wp_customize) {};add_action( 'customize_register', 'my_customize_register' );
相关的主题设定我们都会写到my_customize_register里，我们先来了解三个基本概念：
1. Section
2. Settings
3. Control
为了方便理解，我们可以把section当成设置的一级菜单，control是菜单里的设置控件，settings则是存储设置的容器。
通过查阅wordpress文档，我们找出了那些默认开启的section的唯一id，然后我们在代码里把它们去除：
// Customizerfunction my_customize_register($wp_customize) { // remove default section $wp_customize->remove_section('title_tagline'); $wp_customize->remove_section('custom_css'); $wp_customize->remove_section('static_front_page');};
然后我们添加自己的section、control、settings，这里我们先盘点一下目前的需求，我们需要对页面的公共顶部进行设置，公共顶部含有以下元素：
1. 博客标题
2. 主标语（slogan/tagline）
3. 副标语
那么我们在functions.php里实现代码是像这样的：
$wp_customize->add_section( 'header_setting' , array( 'title' => __( 'Header Setting'), 'priority' => 10, ) ); $wp_customize->add_setting( 'blog_title' , array( 'default' => get_bloginfo('name'), 'transport' => 'refresh', ) ); $wp_customize->add_setting( 'main_tagline' , array( 'default' => 'Free the Internet', 'transport' => 'refresh', ) ); $wp_customize->add_setting( 'sub_tagline' , array( 'default' => 'Across the Great Wall we can reach every corner in the world', 'transport' => 'refresh', ) ); $wp_customize->add_control( 'input_blog_title', array( 'label' => __( 'Blog Title'), 'section' => 'header_setting', 'settings' => 'blog_title', 'type' => 'text', ) ); $wp_customize->add_control( 'input_main_tagline', array( 'label' => __( 'Main tagline'), 'section' => 'header_setting', 'settings' => 'main_tagline', 'type' => 'text', ) ); $wp_customize->add_control( 'input_sub_tagline', array( 'label' => __( 'Sub tagline'), 'section' => 'header_setting', 'settings' => 'sub_tagline', 'type' => 'textarea', ) );
这里我们用到了三个方法：
1. add_section
2. add_settings
3. add_control
对应section、settings、control的添加，需要注意的是，我们在设置文本的title输出那里用到了魔术方法__()，这是为后期主题的国际化做准备，魔术方法__()和魔术方法_e()都是为了主题多语言而存在的，它们之间的不同就是__()返回字符串，而_e()直接把文本在页面里输出，当然，它们都是根据当前系统设定的语言找到对应的语言包输出的，主题国际化的相关内容我们在本系列的后期进行展开。
这样设定之后，我们就可以在主题的任意位置调用这些设置好的内容，现在我们把它们在home.php里显示出来看看。
<body> <header> <?php echo get_theme_mod('blog_title') ?> <?php echo get_theme_mod('main_tagline', 'Free the Internet') ?> <?php echo get_theme_mod('sub_tagline', 'Across the Great Wall we can reach every corner in the world') ?> Header Area </header> </body>
这里我们用到的内置方法是get_theme_mod，我们传两个参数给它，一个是主题设置的settings id，一个是默认值。
还记得我们在第1天建立框架时有添加的style amp-custom吗，我们在里面添加一段css，让我们的header凸显出来：
<style amp-custom> header { width: 100vw; height: 18.5185vw; background: gray; } </style>
刷新页面，我们应该能看到这样的页面输出：
这里，Hhacker's blog是我的blog名称，其它的就是刚才我们设定的主标语和副标语的默认值了。
我们在主题自定义那里设定这些settings并点击发布时，页面里对应的部分就会发生变化了。
接下来我们顺便把主题的favicon参数也实现了吧，favicon是显示在浏览器标签页上的小图标，我们按照之前的方法，建立一套settings和control，并绑定到我们的section里：
$wp_customize->add_setting( 'favicon' , array( 'default' => '', 'transport' => 'refresh', 'sanitize_callback' => 'absint', ) ); $wp_customize->add_control( new WP_Customize_Site_Icon_Control( $wp_customize, 'set_favicon', array( 'label' => __( 'Favicon' ), 'description' => __( 'Favicon is what you see in <strong>browser tabs</strong>, bookmark bars'), 'section' => 'header_setting', 'settings' => 'favicon', 'width' => 32, 'height' => 32, ) ) );
这里我们直接使用了wordpress的内置控件WP_Customize_Site_Icon_Control,这个控件可以直接对图片进行上传和裁剪。
然后我们在header.php公共头里使用使用这个favicon：
<?php if ($icon = wp_get_attachment_url(get_theme_mod('favicon'))) { echo '<link rel="shortcut icon" href="'.$icon.'">'; }?>
这里需要注意的是我们直接get_theme_mod取到的内容是一个数字id，我们需要使用wp_get_attachment_url获取图片id对应的url路径。
这样我们刷新页面 ，就能在标签页上看到我们设置好的的favicon了。
总结和预告今天我们定义了一套主题的设置选项，之后我们会把所有跟主题相关的设置统统放到里面，wordpress的主题自定义设置设计得非常优雅，相对于以往的建立专门的主题设置页面而言，在自定义设置里添加相应的控制选项非常简单和直接，让我们可以对主题设定进行统一管理。
明天（第3天）我们将真正将这一套公共顶部搭建起来，并且实现页面在PC、平板、手机上的响应式布局。
如果你喜欢这个系列的文章，赶快关注我们吧，不要错过后续的更多干货噢。