在当今这个互联网时代,拥有一个个性鲜明的网站已经成为许多人的需求。而WordPress作为全球最受欢迎的博客和内容管理系统,无疑是一个不错的选择。但是,默认的WordPress头部往往无法满足我们的个性化需求。今天,就让我来带你一起探索WordPress头部的修改技巧,轻松打造一个独具特色的网站。
一、WordPress头部简介
我们来了解一下什么是WordPress头部。WordPress头部(也称为header)是网站页面上方的一块区域,通常包括网站标题、logo、导航菜单、搜索框等元素。它是网站的第一印象,对于提升用户体验和品牌形象具有重要意义。
二、WordPress头部修改方法
1. 使用主题自定义功能
许多WordPress主题都提供了自定义头部的功能。你可以通过以下步骤进行操作:
登录WordPress后台,进入“外观”>“主题设置”。
在“自定义”选项卡中,找到“头部设置”。
根据你的需求,修改网站标题、logo、导航菜单等元素。
表格:
| 自定义元素 | 说明 |
| :— | :— |
| 网站标题 | 修改网站标题,使其更具个性 |
| logo | 修改logo图片,提升品牌形象 |
| 导航菜单 | 修改导航菜单,方便用户浏览 |
| 搜索框 | 添加搜索框,提高用户体验 |
2. 编辑主题文件
如果你对WordPress有一定的了解,可以通过编辑主题文件来修改头部。以下是一些常用的头部文件:
header.php:负责定义头部结构。
functions.php:可以在这里添加自定义代码,修改头部元素。
表格:
| 文件 | 说明 |
| :— | :— |
| header.php | 定义头部结构 |
| functions.php | 添加自定义代码,修改头部元素 |
3. 使用插件
许多WordPress插件可以帮助你轻松修改头部。以下是一些常用的插件:
Header Footer Code:允许你在头部和尾部添加自定义代码。
Header Footer Raw:允许你直接编辑头部和尾部文件。
表格:
| 插件 | 说明 |
| :— | :— |
| Header Footer Code | 在头部和尾部添加自定义代码 |
| Header Footer Raw | 直接编辑头部和尾部文件 |
三、注意事项
1. 在修改头部时,请注意保持网站的整体风格一致。
2. 修改头部文件时,请确保备份原始文件,以免出现意外情况。
3. 如果你对WordPress不够熟悉,建议在修改头部之前,先了解相关知识。
四、总结
通过以上方法,你可以在WordPress中轻松修改头部,打造一个独具特色的网站。这只是一个起点,你可以根据自己的需求,不断探索和尝试。希望这篇文章能对你有所帮助!
wordpress主题,修改头部代码加入JS
第一步:新建header.php
在做主题文件夹wp-content\themes\goodblog下面新建一个头部文件header.php,然后将index.php中的头部代码提取(剪切)出来,写入这个文件:
第二步:修改index.php
保存好头部文件,在index.php的前面加上代码:
get_header()函数会自动载入主题文件夹中的header.php文件,所以头部文件的文件名命名为header.php然后使用get_deader()函数即可;
现在头部文件已经制作好了,接下来的工作就是编辑头部文件header.php将里面的静态html代码换成动态的php代码。
第三步:修改title
需要更改信息,一般我们将title信息改成这样的:文章页面标题|网站名称,当然用户也可以根据自己的seo只是更改,比如有的人在标题中加入网站描述。将header.php中的<title>index</title>改成下面的代码:
上面的代码通过判断将首页、文章页、分类页、404页面的<title>信息设置成不一样的形式,这样是很有必要的。
几个判断函数的解释如下:
第四步:修改css文件的路径
在header.php文件中找到下面代码:
这个样式表的路径./style.css是网站根目录。
如果用户不想让别人轻易看出用户网站是使用 wordprss程序,那么可以改变图片、样式表等文件的路径,比如本工作室,将图片、样式表都移到了网站根目录,在网页代码中就不会出现 wordprss站才有的wp-content/themes之类的路径。好了,将上面的代码改成:
bloginfo('stylesheet_url')会自动输出网站主题文件夹下style.css文件的绝对网址,如
说到这里,顺便修改一下图片路径,在index.php里有张图片路径需要修改,不过现在可改可不改,后期会自动调用文章图片;
用文本编辑器打开index.php给这些图片加上正确的URL,搜索代码,将所有的:src=”images/,批量替换成src=”<?php bloginfo('template_url');?>/images/。现在再刷新你的主页,看文章的缩略图是否可以正常显示。
第五步:关于wp_head()
wp_head函数对于要使用插件的主题来说比较重要,一般如果插件需要加载css文件和js文件,都是通过wp_head()函数输出的。在header.php文件的</head>前面添加:
在去看自己的网站,查看网页源代码,会发现<head></head>标签中多了如下代码:
如何在wordpress主题中添加设置页面
将自己设计的题发布或是销售是一件很棒的事情,但并不是每一个主题使用者都有很熟练的HTML/CSS技巧。但是如果在主题中整合一个设置选项页面,就可以使那些完全不懂代码的用户能够很容易地根据他们的喜好来修改主题。下面我将告诉大家如何从零开始做一个最简单的主题选项页(下图为最终效果)。
我们的最终目的是什么?
在开始之前,要先了解我们的最终目的是什么?我们主题可以自行定制哪些内容?这些是需要你在设计主题前就应该考虑好的。
每个主题都可以有很多的可编辑元素,本例中我将通过实现下面这三个方面的定制来说明如何给主题增加设置选项页,你应该要有自己更好的想法。
改变主题配色方案;
增加两个广告位内容;
自定是否显示搜索框;
1、创建所需的文件
在进行主题定制前,应该首先创建一个可供自定义的“设置选项页面”。创建设置选项页的代码需要放置在主题目录下的functions.php文件中。如果我们的模板名为“OptionPage”,那么functions文件的路径为:wp-contentthemesOptionPagefunctions.php。
我们不需要让wordpress手动加载它,在执行时wordpress会自动加载。
2、建立设置选项页
首先第一步需要在后台建立一个空白页面供我们使用。我们通过add_aaction来实现这一步。Actions可以在wordpress执行时的特定时间被响应,例如,当在控制面板创建菜单时,admin_menu就会被响应执行。因此,可以利用这些来实现我们所需的功能。这是我们创建选项页的最基本的功能。
<?php
//设置选项页
functionthemeoptions_admin_menu()
{
//在控制面板的侧边栏添加设置选项页链接
add_theme_page(“主题设置”,“主题选项”,‘edit_themes’,basename(__FILE__),‘themeoptions_page’);
}
functionthemeoptions_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容器;然后,在头部添加一个默认图标作为作为页面标题;最后是设计表单。
<divclass=“wrap”>
<divid=“icon-themes”class=“icon32″><br/></div>
<h2>主题设置</h2>
<formmethod=“POST”action=“”>
<inputtype=“hidden”name=“update_themeoptions”value=“true”/>
<p><inputtype=“submit”name=“submit”id=“submit”class=“buttonbutton-primary”value=“保存更改”></p>
</form>
</div>
在表单中,首先我们需要添加一个隐藏的值,通过它来检查更新是否已经提交。然后添加一个提交按钮,这里我也使用wordpress默认的按钮样式。现在的效果为:
现在我们已经创建了设置选项页的基本结构,下面我们开始根据之前制定的内容进行完善:
首先,我们要允许主题使用者可以更改颜色方案。对于这一点,我们需要一个下拉列表提供可用的配色方案。
其次,增加两个广告位的内容,我们需要增加两个文本框来输入图片的URL及广告链接URL。
最后,用户可选择是否显示搜索框。这一点,我们通过添加复选框来实现。
代码如下:
functionthemeoptions_page()
{
//这是产生主题选项页面的主要功能
?>
<div>
<divid=“icon-themes”><br/></div>
<h2>主题设置</h2>
<formmethod=“POST”action=“”>
<inputtype=“hidden”name=“update_themeoptions”value=“true”/>
<h4>主题配色方案</h4>
<selectname=“colour”>
<?php$colour=get_option(‘mytheme_colour’);?>
<optionvalue=“gray”<?phpif($colour==’gray’){echo‘selected’;}?>>灰色</option>
<optionvalue=“blue”<?phpif($colour==’blue’){echo‘selected’;}?>>浅蓝</option>
<optionvalue=“pink”<?phpif($colour==’pink’){echo‘selected’;}?>>粉红</option>
</select>
<h4>图片广告位(1)</h4>
<p><inputtype=“text”name=“ad1image”id=“ad1image”size=“32”value=“<?phpechoget_option(‘mytheme_ad1image’);?>”/>广告图片</p>
<p><inputtype=“text”name=“ad1url”id=“ad1url”size=“32”value=“<?phpechoget_option(‘mytheme_ad1url’);?>”/>广告链接</p>
<h4>图片广告位(2)</h4>
<p><inputtype=“text”name=“ad2image”id=“ad2image”size=“32”value=“<?phpechoget_option(‘mytheme_ad2image’);?>”/>广告图片</p>
<p><inputtype=“text”name=“ad2url”id=“ad2url”size=“32”value=“<?phpechoget_option(‘mytheme_ad2url’);?>”/>广告链接</p>
<h4><inputtype=“checkbox”name=“display_search”id=“display_search”<?phpechoget_option(‘mytheme_display_search’);?>/>显示搜索框</h4><p><inputtype=“submit”name=“bcn_admin_options”value=“更新数据”/></p>
</form>
</div>
<?php
}
到这里选项页面的内容就已经基本构建完毕了。
4、数据库更新
到目前为止,我们已经创建了一个主题选项页面,下一步要做的就是如何将数据透过POST提交的wordpress数据库。要做到这一点,需要创建一个新的功能函数themeoptions_update(),这个函数将会被themeoptions_page()调用,所以将下面的代码添加到themeoptions_page()函数的最上面。
if($_POST[‘update_themeoptions’]==’true’){themeoptions_update();}
下一步是增加一个更新函数。
functionthemeoptions_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、调用选项定制主题
我们主题的默认样式文件为style.css,如果使用其他的配色方案,我们需要建立相应的样式文件,例如本例中的blue.css、pink.css,style.css为默认的灰色。
为了切换配色方案样式表,需要在主题header中加入以下代码:
<linkrel=“stylesheet”href=“<?phpbloginfo(‘stylesheet_directory’);?>/default.css”type=“text/css”>
<linkrel=“stylesheet”href=“<?phpbloginfo(‘stylesheet_directory’);?>/<?phpechoget_option(‘mytheme_colour’);?>.css”type=“text/css”>
增加广告位图片—在你想要放置广告的地方添加以下代码:
<ahref=“<?phpechoget_option(‘mytheme_ad1url’);?>”><imgsrc=“<?phpechoget_option(‘mytheme_ad1image’);?>”height=“125”width=“125”/></a>
<ahref=“<?phpechoget_option(‘mytheme_ad2url’);?>”><imgsrc=“<?phpechoget_option(‘mytheme_ad2image’);?>”height=“125”width=“125”/></a>
是否显示搜索框—在需要放置搜索框的地方添加以下代码,当用户选择显示搜索框时会显示,否则则不显示:
<?phpif(get_option(‘mytheme_display_search’)==‘checked’){?>
<h3>搜索框</h3>
<formmethod=“get”id=“searchform”action=“<?phpechoesc_url(home_url(‘/’));?>”>
<inputtype=“text”name=“s”id=“s”placeholder=“<?phpesc_attr_e(‘Search’,’85Ryan’);?>”/>
<inputtype=“submit”name=“submit”id=“searchsubmit”value=“搜索”/>
</form>
<?php}?>
简单5步,制作wordpress留言板
做一个wordpress留言板很简单,我们知道一般可以用新建一个主题名字叫“留言板”的页面,让访客以评论留言的方式来实现。但是这种方式建立的留言板,其实是一个一般主题(post)或页面(page),因此缺乏进一步定制的功能,而且提示文字也全部是“评论”要做一个可定制的留言板其实很简单,只需要5步,那就让我们开始吧
制作留言板模板
1,找到你博客模板目录中的single.php文件(一般你的模板目录是在/wp-content/themes/博客模板名称/);复制single.php并重命名为guestbook.php,这样做的目的是我们希望留言板能保持博客的基本布局如:页面头部,页脚和侧边栏。因此最好的方式就是复制用来显示单篇主题的页面模板文件single.php
2,用一款合适的文本编辑器(如:editplus,ultraedit,notepad2,之所以没说windows自带的notepad是因为它对UTF-8的编码方式支持不好);打开guestbook.php在文件头部找到如下php代码:?php get_header();?在此语句前加一段仅带注释语句的模板标识,这里我们将页面模板名字(Template Name)定义为Guestbook,这个名字在下面会有用到。?php/*Template Name: Guestbook*/?
OK,简单吧,留言板的页面模板文件就做好了。 3,将修改后的guestbook.php上传到博客模板目录(/wp-content/themes/博客模板名称/)下
在后台创建留言板
4,以具有admin权限的帐号登录,新建一个页面,在主题名称处输入“留言板”,在内容处像往常写博客主题一样输入些内容,如:请留下宝贵意见和建议等等
5,很重要的一步:在右侧页面模板(page template)处,选择刚才创建的guestbook页面模板,发布(publish),完成。
去自己的博客主页看看,根据博客模板的不同,留言板会以Tab方式或者侧栏链接的方式显示。






