WordPress作为全球最受欢迎的内容管理系统,拥有强大的功能和灵活的扩展性。今天,我们就来聊聊如何在WordPress中增加页面,让您的网站内容更加丰富、结构更加清晰。以下是一篇详细的教程,新手朋友们快来学习一下吧!
一、准备工作
在开始增加页面之前,请您确保已经:
1. 安装并配置好WordPress网站;
2. 登录WordPress后台管理界面。
二、添加新页面
1. 进入后台管理界面:登录WordPress后台,点击左侧菜单栏的“页面”选项。
2. 点击“添加新页面”:在页面列表页面,点击页面列表上方右侧的“添加新页面”按钮。
3. 填写页面信息:
页面标题:输入您要添加的页面标题,例如“关于我们”;
页面地址:系统会自动生成一个页面地址,您可以根据需要修改;
页面内容:在编辑器中输入页面内容,可以使用WordPress内置的编辑器功能进行排版和添加图片、视频等元素。
4. 设置页面属性:
模板:选择页面模板,例如默认模板或自定义模板;
页面属性:设置页面属性,如作者、分类、标签等;
发布状态:选择页面发布状态,如立即发布、存为草稿等。
5. 保存页面:填写完所有信息后,点击“发布”按钮,即可将页面添加到网站中。
三、页面管理
1. 编辑页面:在页面列表中,点击页面标题或“编辑”按钮,即可进入页面编辑界面,对页面内容进行修改。
2. 删除页面:在页面列表中,点击页面标题右侧的“删除”按钮,即可删除该页面。
3. 页面排序:在页面列表中,可以通过拖动页面标题来调整页面排序。
四、常见问题解答
1. 为什么我的页面没有显示在网站上?
确保您已经将页面设置为“立即发布”或“已发布”状态;
检查页面模板是否正确,或者是否有自定义样式覆盖了页面显示;
检查网站缓存,清除缓存后重新访问页面。
2. 如何将页面设置为首页?
在页面设置中,将页面设置为“首页”;
进入设置 – 阅读设置,将“首页显示”设置为“静态页面”,并将“首页”和“文章页面”设置为刚才设置的页面。
3. 如何为页面添加自定义样式?
在页面编辑器中,使用自定义CSS功能,添加您想要的样式;
保存页面后,自定义样式将生效。
五、总结
通过以上教程,相信您已经学会了如何在WordPress中增加页面。增加页面可以让您的网站内容更加丰富,提高用户体验。如果您还有其他问题,欢迎在评论区留言,我会尽力为您解答。
以下是一个简单的表格,总结了一些常用的页面类型及其用途:
页面类型 | 用途 |
---|---|
首页 | 网站入口,展示网站主要内容和导航 |
关于我们 | 介绍网站背景、团队等信息 |
产品展示 | 展示网站产品或服务 |
新闻动态 | 发布网站最新动态和资讯 |
联系我们 | 提供联系方式,方便用户咨询和沟通 |
希望这篇教程对您有所帮助,祝您在WordPress中玩得愉快!
如何在WordPress中编辑自定义页面
在当前使用的主题文件夹中创建一个新模板,将它命名为 about.php。
然后把 page.php模板中的内容拷贝到 about.php文件中。
接着,找到模板文件中调用 sidebar的函数,去掉或者注释掉它。
可能需要找到 content div标签,并手动给它增加一个 width样式来扩展宽度以便能够占满整个 container div标签。
完成之后,到 about.php的最上面插入以下代码:
做好上面修改之后,保存,并上传到服务器上的当前主题文件夹下。
然后就是让“关于”页面使用“关于”页面模板,登陆到 WordPress后台,创建新页面,或者编辑 about页面(如果已经创建了),在右边,点击页面模板的下拉菜单,在下拉列表中找到“关于”,选择它并点击保存。
如何在wordpress主题中添加设置页面
1、创建所需的文件
在进行主题定制前,应该首先创建一个可供自定义的“设置选项页面”。创建设置选项页的代码需要放置在主题目录下的functions.php文件中。如果我们的模板名为“OptionPage”,那么functions文件的路径为:wp-contentthemesOptionPagefunctions.php。
我们不需要让wordpress手动加载它,在执行时wordpress会自动加载。
2、建立设置选项页
首先第一步需要在后台建立一个空白页面供我们使用。我们通过add_aaction来实现这一步。Actions可以在wordpress执行时的特定时间被响应,例如,当在控制面板创建菜单时,admin_menu就会被响应执行。因此,可以利用这些来实现我们所需的功能。这是我们创建选项页的最基本的功能。
<?php
//设置选项页
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容器;然后,在头部添加一个默认图标作为作为页面标题;最后是设计表单。
<div class=“wrap”>
<div id=“icon-themes” class=“icon32″><br/></div>
<h2>主题设置</h2>
<form method=“POST” action=“”>
<input type=“hidden” name=“update_themeoptions” value=“true”/>
<p><input type=“submit” name=“submit” id=“submit” class=“button button-primary” value=“保存更改”></p>
</form>
</div>
在表单中,首先我们需要添加一个隐藏的值,通过它来检查更新是否已经提交。然后添加一个提交按钮,这里我也使用wordpress默认的按钮样式。现在的效果为:
现在我们已经创建了设置选项页的基本结构,下面我们开始根据之前制定的内容进行完善:
首先,我们要允许主题使用者可以更改颜色方案。对于这一点,我们需要一个下拉列表提供可用的配色方案。
其次,增加两个广告位的内容,我们需要增加两个文本框来输入图片的URL及广告链接URL。
最后,用户可选择是否显示搜索框。这一点,我们通过添加复选框来实现。
代码如下:
function themeoptions_page()
{
//这是产生主题选项页面的主要功能
?>
<div>
<div id=“icon-themes”><br/></div>
<h2>主题设置</h2>
<form method=“POST” action=“”>
<input type=“hidden” name=“update_themeoptions” value=“true”/>
<h4>主题配色方案</h4>
<select name=“colour”>
<?php$colour= get_option(‘mytheme_colour’);?>
<option value=“gray”<?php if($colour==’gray’){ echo‘selected’;}?>>灰色</option>
<option value=“blue”<?php if($colour==’blue’){ echo‘selected’;}?>>浅蓝</option>
<option value=“pink”<?php if($colour==’pink’){ echo‘selected’;}?>>粉红</option>
</select>
<h4>图片广告位(1)</h4>
<p><input type=“text” name=“ad1image” id=“ad1image” size=“32” value=“<?php echo get_option(‘mytheme_ad1image’);?>”/>广告图片</p>
<p><input type=“text” name=“ad1url” id=“ad1url” size=“32” value=“<?php echo get_option(‘mytheme_ad1url’);?>”/>广告链接</p>
<h4>图片广告位(2)</h4>
<p><input type=“text” name=“ad2image” id=“ad2image” size=“32” value=“<?php echo get_option(‘mytheme_ad2image’);?>”/>广告图片</p>
<p><input type=“text” name=“ad2url” id=“ad2url” size=“32” value=“<?php echo get_option(‘mytheme_ad2url’);?>”/>广告链接</p>
<h4><input type=“checkbox” name=“display_search” id=“display_search”<?php echo get_option(‘mytheme_display_search’);?>/>显示搜索框</h4><p><input type=“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();}
下一步是增加一个更新函数。
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、调用选项定制主题
我们主题的默认样式文件为style.css,如果使用其他的配色方案,我们需要建立相应的样式文件,例如本例中的blue.css、pink.css,style.css为默认的灰色。
为了切换配色方案样式表,需要在主题header中加入以下代码:
<link rel=“stylesheet” href=“<?php bloginfo(‘stylesheet_directory’);?>/default.css” type=“text/css”>
<link rel=“stylesheet” href=“<?php bloginfo(‘stylesheet_directory’);?>/<?php echo get_option(‘mytheme_colour’);?>.css” type=“text/css”>
增加广告位图片—在你想要放置广告的地方添加以下代码:
<a href=“<?php echo get_option(‘mytheme_ad1url’);?>”><img src=“<?php echo get_option(‘mytheme_ad1image’);?>” height=“125” width=“125”/></a>
<a href=“<?php echo get_option(‘mytheme_ad2url’);?>”><img src=“<?php echo get_option(‘mytheme_ad2image’);?>” height=“125” width=“125”/></a>
是否显示搜索框—在需要放置搜索框的地方添加以下代码,当用户选择显示搜索框时会显示,否则则不显示:
<?php if( get_option(‘mytheme_display_search’)==‘checked’){?>
<h3>搜索框</h3>
<form method=“get” id=“searchform” action=“<?php echo esc_url( home_url(‘/’));?>”>
<input type=“text” name=“s” id=“s” placeholder=“<?php esc_attr_e(‘Search’,’85Ryan’);?>”/>
<input type=“submit” name=“submit” id=“searchsubmit” value=“搜索”/>
</form>
<?php}?>
如何为WordPress的网站建立多级菜单
WordPress是一个注重美学、易用性和网络标准的个人信息发布平台。WordPress虽为免费的开源软件,但其价值无法用金钱来衡量。WordPress的图形设计在性能上易于操作、易于浏览;在外观上优雅大方、风格清新、色彩诱人。使用WordPress可以搭建功能强大的网络信息发布平台,但更多的是应用于个性化的博客。针对博客的应用,WordPress能让您省却对后台技术的担心,集中精力做好网站的内容。
正是由于Wordpress的功能强大、易用,很多公司与个人都用它来建站。尽管Wordpress是如此好用,但有些细节的东西是需要我们进行微调。例如用Wordpress建站后会发现网站导航菜单栏只有”首页”与”示例页面”两个菜单,这当然不是我们想要的导航菜单栏,因此我们要打造属于自己的多级导航菜单栏。
第一步,通过安装Wordpress建好网站后,我们会发现网站空空如也,更重要的导航菜单也只有”首页”与”示例页面”。
第二步,首先,我们进入Wordpress后台管理页面,在左边工具栏选择[外观]–>[菜单],我们在这里可以先建立一级菜单。
第三步,选中[示例页面]的勾,然后单击[添加到菜单],这是新增了一个一级菜单项,然后选中菜项修改名称。如此类推可以建立多个一级菜单项。
第四步,在右边我们把其中一个[示例页面]菜单拖至[编程软件]下面,这样就创建了二级菜单项。如此类推可以建立多个二级菜单项。
第五步,将对应的二级菜单的名称及属性进行修改,按第四步可多次循环增加二级菜单项。
第六步,通过[上一位]与[下一位]两个按钮来对二级菜单项排序,这样就可以得到我们想的顺序。
第七步,通过第四到第六步骤的操作,便可以完成个性化的二级菜单导航栏,如果需要的话还可以建成三级菜单导航栏,这个根据需要进行。
大功告成,我们去看看最终网站的显示效果就可以发现完全按我们的意思做到了。