如何自定义wordpress菜单css样式

1.首先找到wordpress菜单中的class类名2.在wordpress模版目录下一般在wp-content\themes\主题名，找到style.css3.在style.css中为类名添加样式，如下：.menu-item:{color:red;}这样就可以设计菜单css样式了

怎样把wordpress的主题菜单某一项改成特殊样式

我们知道，网页是由html和css进行最基本的架构布局，那么，wordpress主题也是一样，今天小编就来教一教你如何修改自己的主题样式，达到自己修改主题的目的，并且我们将放上非常实用的css代码，让你可以直接使用。

话不多说，我们现在就来看看如何简单修改一款主题吧~首先，你要知道主题的位置，如果你可以在本地测试，那么是最好不过的，主题的位置在根目录/wp-content/themes/ 这个文件夹下的文件夹中，找到自己的主题文件然后，我们推荐下载火狐浏览器，安装firebug插件：下载完成火狐之后，打开火狐浏览器，点击工具下拉菜单，选择附加组件，在搜索一栏中输入firebug，安装即可，安装完成之后，重启浏览器，按F12即可出现firebug的界面。

firebug的左边有一个箭头的按钮，可以使用这个按钮找到你想要修改的元素，在右边，会出现影响这个元素的css，如下图：现在，我们需要给我们选中的元素加一个投影，点击右边的css，双击里面的效果css，添加新的代码：效果实现无误之后，到我们第一步找到的主题文件夹中，寻找到相应的css,css的路径在上图右边的蓝色标题中，上图要修改的这个元素在pages.css中，鼠标放在上面，会出现详细的路径，找到文件，再根据第几行显示的位置，添加进css，保存即可。

现在你会简单的修改你的主题样式了吗？ 修改完成之后，记得记住你修改了那些文件，在主题更新中，可以询问下是否修改过css，如果没有的话，更新主题可以保留自己的css文件，就不会更新掉自己修改的样式了~现在你可以尝试在本地修改一些样式，如颜色、投影等等，让你的主题与众不同哦~ 下面我们给你准备了一些好看的css样式

如何在wordpress主题中添加设置页面

1、创建所需的文件在进行主题定制前，应该首先创建一个可供自定义的“设置选项页面”。

创建设置选项页的代码需要放置在主题目录下的functions.php文件中。

如果我们的主题名为“OptionPage”，那么functions.php文件的路径为：\wp-content\themes\OptionPage\functions.phph。

我们不需要让wordpress手动加载它，在执行时wordpress会自动加载。

2、建立设置选项页首先第一步需要在后台建立一个空白页面供我们使用。

我们通过add_aaction来实现这一步。

Actions可以在wordpress执行时的特定时间被响应，例如，当在控制面板创建菜单时，admin_menu就会被响应执行。

因此，可以利用这些来实现我们所需的功能。

这是我们创建选项页的最基本的功能。

function themeoptions_admin_menu（){// 在控制面板的侧边栏添加设置选项页链接add_theme_page（＂主题设置＂， ＂主题选项＂， 'edit_themes', basename(__FILE__), 'themeoptions_page');}function themeoptions_page（){// 设置选项页面的主要功能}add_action('admin_menu', 'themeoptions_admin_menu');?>themeoptions_admin_menu（) 是在控制面板的侧边栏中添加一个链接，指向我们创建的选项页：themeoptions_page。

add_theme_page（) 的参数为：页面标题：主题设置菜单标题：主题选项（p.s.为了区分显示，页面与菜单标题我做了不同我命名）作用功能：edit_themes;Handle（句柄）：当前文件；执行的函数：themeoptions_page；现在后台控制面板侧边栏的处就多了一个“主题设置”的菜单，但是现在还是空白的，我们后面要实现的定制内容就在这个空白页面上创建。

3、添加选项和字段现在我们就可以在刚创建的空白页面上添加我们的选项和字段。

这个页面你可以根据自己的需要进行样式风格化，但在本教程中我们将使用wordpress默认的类，这样可以节省我们的时间并且看起来更加原生。

页面内容的代码需包含在 themeoptions_page（) 函数内。

首先，我们先添加一个 class=＂wrap＂ 的 div 容器；然后，在头部添加一个默认图标作为作为页面标题；最后是设计表单。

function themeoptions_page(){// here's the main function that will generate our options page？> 主题设置 在表单中，首先我们需要添加一个隐藏的值，通过它来检查更新是否已经提交。

然后添加一个提交按钮，这里我也使用wordpress默认的按钮样式。

现在的效果为：现在我们已经创建了设置选项页的基本结构，下面我们开始根据之前制定的内容进行完善：首先，我们要允许主题使用者可以更改颜色方案。

对于这一点，我们需要一个下拉列表提供可用的配色方案。

其次，增加两个广告位的内容，我们需要增加两个文本框来输入图片的URL及广告链接URL。

最后，用户可选择是否显示搜索框。

这一点，我们通过添加复选框来实现。

代码如下：function themeoptions_page（){// 这是产生主题选项页面的主要功能？> 主题设置 主题配色方案 >灰色>浅蓝>粉红图片广告位（1） 广告图片 广告链接 图片广告位（2） 广告图片 广告链接 /> 显示搜索框 到这里选项页面的内容就已经基本构建完毕了。

4、数据库更新到目前为止，我们已经创建了一个主题选项页面，下一步要做的就是如何将数据透过POST提交的wordpress数据库。

要做到这一点，需要创建一个新的功能函数themeoptions_update（)，这个函数将会被themeoptions_page（)调用，所以将下面的代码添加到themeoptions_page（)函数的最上面。

if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update（)； }下一步是增加一个更新函数。

function themeoptions_update（){ // 数据更新验证 update_option('mytheme_colour', $_POST['colour']); update_option('mytheme_ad1image', $_POST['ad1image']); update_option('mytheme_ad1url', $_POST['ad1url']); update_option('mytheme_ad2image', $_POST['ad2image']); update_option('mytheme_ad2url', $_POST['ad2url']); if ($_POST['display_search']=='on') { $display = 'checked'; } else { $display = ''; } update_option('mytheme_display_search', $display);}5、调用选项定制主题5.1 更改配色方案我们主题的默认样式文件为 style.css，如果使用其他的配色方案，我们需要建立相应的样式文件，例如本例中的 blue.css、pink.css,style.css 为默认的灰色。

为了切换配色方案样式表，需要在主题 header 中加入以下代码：/default.css＂ type=＂text/css＂>5.2 增加广告位图片在你想要放置广告的地方添加以下代码：5.3 是否显示搜索框在需要放置搜索框的地方添加以下代码，当用户选择显示搜索框时会显示，否则则不显示：搜索框

转载请注明出处51数据库 » wordpress菜单样式