如何在Wordpress中创建没有插件的单页网站?

时间:2014-06-03 22:07:58

标签: php jquery wordpress wordpress-plugin

最近我的老板买了一个名为" X",http://theme.co/x/的Wordpress主题。在这个主题中,它可以存档一个页面网站,导航栏固定在浏览器的顶部。但是我的老板想要右侧的导航栏。我在网上搜索过,发现一些插件可以归档这种效果。但是主题支持团队表示他们不对第三方插件引起的任何问题负责。

所以我想问一下是否可以直接更改后端代码而不是使用插件来更改导航样式?如果可以的话,怎么样?非常感谢!

2 个答案:

答案 0 :(得分:0)

可以创建wordpress中的导航菜单,然后将其作为窗口小部件选项提供。在外观下找到菜单(请参阅链接),然后根据需要制作导航菜单,其中包括子页面和/或帖子。删除侧栏中的菜单小部件,然后选择您创建的菜单。然后,如果需要,您可以从主题中删除顶部菜单,并使用CSS使侧边栏菜单适合您的外观需求。

http://codex.wordpress.org/WordPress_Menu_User_Guide

我不明白为什么单页网站需要导航?

如果您希望一个页面具有与主网站不同的特定导航,请查看使用页面并为其创建自定义页面模板。

http://codex.wordpress.org/Page_Templates#Custom_Page_Template

答案 1 :(得分:0)

制作要更改的每个文件的备份副本 请注意,行号中可能存在轻微的差异

第1步
发现

.x-navbar-fixed-top-active .x-navbar-wrap {height: 54px;}

作为索引文件中的样式并将其更改为:

.x-navbar-fixed-top-active .x-navbar-wrap {width: 88px;}

也找到了

.x-navbar-inner {min-height: 54px;}

作为索引文件中的样式并将其更改为:

..x-navbar-inner {min-width: 88px;}

88px是每个菜单项的宽度,您可以自己调整它以适合您确切需要的值。

第2步
找到x-custom.css,确保它没有缩小并至少使用notepad ++(或任何其他半高级代码编辑器)打开它,因为您需要跟踪行号。
更改x-custom.css中的css,如下所示:

<小时/> 第230行(.page-template-template-layout-home-1-php .x-navbar.x-navbar-fixed-top,.page-template-template-layout-home-1-lp-f-php .x -navbar.x-navbar-fixed-top)来自

top: 0;
bottom: auto;

right: 0;
left: auto;

<小时/> 第237行(.page-template-template-layout-home-1-php .x-navbar .x-container-fluid,.page-template-template-layout-home-1-lp-f-php .x-navbar .x-container-fluid)来自

width: auto;
max-width: none;

height: auto;
max-height: none;

<小时/> 第243行(.page-template-template-layout-home-1-php .x-navbar .x-nav,.page-template-template-layout-home-1-lp-f-php .x-navbar .x -nav)删除

padding-left: 65px;

<小时/> 第250行(.page-template-template-layout-home-1-php .x-navbar .x-nav&gt; li,.page-template-template-layout-home-1-lp-f-php .x- navbar .x-nav&gt; li)删除

width: 10%;

添加

clear: right;

<小时/> 第257行(.page-template-template-layout-home-1-php .x-navbar .x-nav&gt; li.li-0,.page-template-template-layout-home-1-lp-f- php .x-navbar .x-nav&gt; li.li-0)删除

position: absolute;
top: 0;
left: 0;

添加

float:right;

<小时/> 第273行(.page-template-template-layout-home-1-php .x-navbar .x-nav&gt; li&gt; a,.page-template-template-layout-home-1-lp-f-php .x-navbar .x-nav&gt; li&gt; a)来自

border-right: 1px solid #171717;
-webkit-box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.065);
box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.065);

border-top: 1px solid #171717;
-webkit-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.065);
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.065);

第3步
找到integrity-light.css 更改integrity-light.css中的css,如下所示:

<小时/> 第1478行删除

float: left;