前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >WordPress主题制作（六）：制作侧边栏模板sidebar.php

WordPress主题制作（六）：制作侧边栏模板sidebar.php

作者头像
Yiiven
发布于 2022-12-15 14:39:32
1.4K0
发布于 2022-12-15 14:39:32
举报
文章被收录于专栏：怡文菌怡文菌

完成了头部和底部的抽离，接下来我们要做的就是从index中抽离侧边栏sidebar。

与之前类似，我们先创建一个文件sidebar.php，然后将index.php中的以下部分移动到新的sidebar.php中

代码语言：javascript
复制
<!-- Column 2 / Sidebar -->
<div class="grid_4">
	<h3>Catagories</h3>
	<ul class="sidebar">
		<li><a href="">So who are we?</a></li>
		<li><a href="">Philosophy</a></li>
		<li><a href="">History</a></li>
		<li><a href="">Jobs</a></li>
		<li><a href="">Staff</a></li>
		<li><a href="">Clients</a></li>
	</ul>
	<h3>Archives</h3>
	<ul class="sidebar">
		<li><a href="">January 2010</a></li>
		<li><a href="">December 2009</a></li>
		<li><a href="">Novemeber 2009</a></li>
		<li><a href="">October 2009</a></li>
		<li><a href="">September 2009</a></li>
		<li><a href="">August 2009</a></li>
	</ul>
</div>
<div class="hr grid_12 clearfix"> </div>

然后将其他页面（index.php、archive.php、page.php、single.php）中的这部分代码修改为

代码语言：javascript
复制
<?php get_sidebar(); ?>

这样我们就将侧边栏抽离出来了，但目前我们的侧边栏还是静态的，如何让我们的侧边栏可以适应WordPress的小工具呢？接下来我们以标签云为例展示如何让侧边栏可以适应小工具

functions.php

代码语言：javascript
复制
<?php
// widgets
if( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'First_sidebar',
		'id'  => 'sidebar-1',
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Second_sidebar',
		'id'  => 'sidebar-2',
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Third_sidebar',
		'id'  => 'sidebar-3',
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Fourth_sidebar',
		'id'  => 'sidebar-4',
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
	));
}
?>

sidebar.php

代码语言：javascript
复制
<!-- Column 2 / Sidebar -->
<div class="grid_4">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Third_sidebar') ) : ?>	
	<h3>标签云</h3>
	<p><?php wp_tag_cloud('smallest=8&largest=22'); ?></p>
<?php endif; ?>
</div>
<div class="hr grid_12 clearfix"> </div>

style.css

*除了头部注释信息以外的其他内容

代码语言：javascript
复制
#wp-calendar {
    width:100%;
}
#wp-calendar #today {
    background:none repeat scroll 0 0 #BBBBBB;
}
#wp-calendar tbody a {
    font-weight:bold;
}
#wp-calendar caption {
    font-family:Arial;
    font-size:150%;
    font-weight:bold;
    letter-spacing:-0.05em;
    padding-bottom:5px;
    text-align:left;
}
#wp-calendar th, #wp-calendar td {
    text-align:center;
}
#wp-calendar tbody td {
    width:32px;
    height:17px;
    border:1px solid #CCCCCC;
}
#wp-calendar tbody td.pad {
    border:0 none;
}
#wp-calendar th {
    background:none repeat scroll 0 0 #999999;
    color:#FFFFFF;
}
#wp-calendar td#prev {
    padding-top:5px;
    text-align:left;
}
#wp-calendar td#next {
    padding-top:5px;
    text-align:right;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline:none;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
pre {
    background: #F4F5F7;
    border:1px dashed #CCCCCC;
    margin:5px 0;
    padding:8px 12px 8px 36px;
    white-space:pre-wrap;
}
/* remember to define focus styles! */
 :focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
 ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
 table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    background:url(./images/bg.png) repeat-x #FFFFFF;
    font-size:13px;
    font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
    color:#000000;
}
a:focus {
    outline:1px dotted;
}
a {
    color:#717171;
    text-decoration:none;
}
a:hover {
    text-decoration:none;
}
a span {
    font-size:90%;
}
h1 {
    font-size:25px;
}
h2 {
    font-size:23px;
}
h3 {
    font-size:21px;
}
h4 {
    font-size:19px;
}
h5 {
    font-size:17px;
}
h6 {
    font-size:15px;
}
ol {
    list-style:decimal;
}
ul {
    list-style:disc;
}
li {
    margin-left:20px;
    position:relative;
}
p, li, dl {
    line-height:18px;
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset, img {
    margin-bottom:20px;
}
#wrapper {
    margin-top:7px;
}
ul li ul, ol li ol {
    margin-bottom:0px;
}
ol {
    padding: 0 0 0 5px;
}
/* Custom Grid */
 .container_12 {
    margin-left:auto;
    margin-right:auto;
    width:1020px;
}
.float {
    display:inline;
    float:left;
    position:relative;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display:inline;
    float:left;
    position:relative;
    margin-left:20px;
    margin-right:20px;
}
.container_12 .grid_1 {
    width:45px;
}
.container_12 .grid_2 {
    width:130px;
}
.container_12 .grid_3 {
    width:215px;
}
.container_12 .grid_4 {
    width:300px;
}
.container_12 .grid_5 {
    width:385px;
}
.container_12 .grid_6 {
    width:470px;
}
.container_12 .grid_7 {
    width:555px;
}
.container_12 .grid_8 {
    width:640px;
}
.container_12 .grid_9 {
    width:725px;
}
.container_12 .grid_10 {
    width:810px;
}
.container_12 .grid_11 {
    width:895px;
}
.container_12 .grid_12 {
    width:980px;
}
/* Global Classes */
.hr {
    border:none;
    border-bottom:1px solid #f0f0f0;
    border-top:1px solid #d6d6d6;
    clear:both;
    height:0;
    line-height:0;
    width:100%;
    font-size:0;
    padding:0;
    margin-bottom :20px;
}
.pr {
    border:none;
    border-bottom:1px solid #f0f0f0;
    border-top:1px solid #d6d6d6;
    clear:both;
    height:0;
    line-height:0;
    width:100%;
    font-size:0;
    padding:0;
    margin-bottom :30px;
}
.dotted {
    border-style:dashed;
    border-left:0;
    border-right:0;
}
.meta {
    font-weight:normal;
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
    font-size:11px;
    color:#999999 !important;
    line-height:16px;
    text-transform:none;
    text-shadow:none;
}
.right {
    float:right;
}
.left {
    float:left;
}
.img_left {
    float:left;
    margin:10px 20px 10px 0;
}
.img_right {
    float:right;
    margin:10px 0 10px 20px;
}
.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}
.textright {
    text-align:right;
}
.error, .success {
    display:none;
}
/* Buttons */
.button, .button:visited {
    background:#000000 url(./images/alert-overlay.png) repeat-x;
    display:inline-block;
    padding:5px 10px 6px;
    color:#fff;
    text-decoration:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom:1px solid rgba(0, 0, 0, 0.25);
    position:relative;
    cursor:pointer;
    font-size:13px;
    font-weight:bold;
    line-height:1;
    border:0;
}
.button:hover {
    background-color:#111;
    color:#fff;
    text-decoration:none;
}
.button:active {
    top:1px;
}
/* Site Logo */
h1#logo {
    font-size:45px;
    font-weight:normal;
    font-family:"Trajan Pro";
    margin-top:30px;
    color:#000000;
}
/* Site Navigation */
ul#navigation {
    text-transform:uppercase;
}
ul#navigation li {
    float:right;
    display:inline;
    margin : 0 0 0 50px;
}
ul#navigation li a {
    font-family:arial, sans-serif !important;
    display:block;
    padding:44px 0 0;
    text-decoration:none;
    color:#000000;
    font-size:14px;
    font-weight:bold;
}
ul#navigation li.current-cat, ul#navigation li.current_page_item, ul#navigation li.current {
    background:url(./images/triangle.gif) no-repeat center top;
}
ul#navigation li a:hover {
    background:url(./images/triangle.gif) no-repeat center top;
}
/* Footer */
.footer, .footer a {
    color:#494949;
}
.footer a:hover {
    color:#9d9d9d;
}
/* Sub Navigation */
.container_12 .grid_4 ul {
    list-style:none;
    margin:0 0 30px 0;
    padding:0;
}
.container_12 .grid_4 ul li {
    margin:0 0 0 0;
    padding:0;
}
.container_12 .grid_4 ul a {
    width:295px;
    display:inline-block;
    padding:10px 0 10px 5px;
    border-bottom:1px solid #e4e4e4;
    text-decoration:none;
    color:#393939;
}
.container_12 .grid_4 ul li:last-child a {
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
}
.container_12 .grid_4 ul li:first-child a {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
}
.container_12 .grid_4 ul a:hover {
    width:280px;
    background:#f6f6f6;
    padding:10px 0 10px 20px;
}
/* Caption */
h2.caption {
    color:#494949;
    text-shadow:1px 1px 1px #cfcfcf;
    font-size:23px;
    line-height:30px;
    font-weight:normal;
}
h2.caption span {
    color:#000000;
    font-weight:bold;
}
h2.caption a:hover {
    text-decoration : underline;
}
/* Homepage QuickNavigation */
#quicknav {
    background:url(./images/link_border.png) repeat-x;
}
a .title {
    color:#000000;
}
.quicknavgrid_3 {
    width:204px;
    margin:0px;
    padding:20px 20px 0;
    display:inline;
    float:left;
    position:relative;
    margin-left:1px;
}
.quicknav {
    background:#FFFFFF;
}
.quicknav:hover {
    background:url(./images/link_bg.png) repeat-x;
}
.quicknavhr {
    margin-bottom:0;
}
.quicknav.alpha {
    margin-left:0;
    width:205px;
}
/* About Us Page Timeline */
dl.history {
    margin:10px 10px;
}
dl.history {
    margin:0 0 10px 0;
    zoom:1
}
dl.history dt {
    width:50px;
    float:left;
    font-weight:bold;
}
dl.history dd {
    width:250px;
    float:left;
    padding:0;
    margin-bottom:20px;
}
/* Common Scroller Styles */
.roundabout-holder {
    list-style:none;
    width:500px;
    height:300px;
    margin:0px auto;
}
.roundabout-moveable-item {
    font-size:12px!important;
    height:300px;
    width:600px;
    cursor:pointer;
    padding:5px;
    border:1px solid #aaaaaa;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    background:#f9f9f9;
}
.roundabout-moveable-item img {
    height:100%;
    width:100%;
    background-color:#FFFFFF;
    margin:0;
}
.roundabout-in-focus {
    cursor:auto;
}
.roundabout-in-focus:hover {
    -webkit-box-shadow:0px 0px 20px #787878;
    -moz-box-shadow:0px 0px 20px #787878;
    background:#f9f9f9;
}
.roundabout-holder span {
    display:none;
    font-size:12px;
}
.roundabout-in-focus:hover span {
    display:inline;
    position:absolute;
    bottom:5px;
    right:5px;
    padding:8px 20px;
    background:#f9f9f9;
    color:#000000;
    z-index:999;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topLeft: 5px;
    font-size : 12px;
    border-left:1px solid #aaaaaa;
    border-top:1px solid #aaaaaa;
}
.roundabout a:active, .roundabout a:focus, .roundabout a:visited {
    outline:none;
    text-decoration:none;
}
.roundabou li {
    margin:0
}
a img {
    border:none;
    outline:0;
}
/* Featured Image Slider */
#featured {
    margin:10px 0 40px 0;
}
/* Portfolio Image Slider */
#folio_scroller_container {
    margin-top:35px;
    margin-bottom:40px;
    height:auto;
}
#folio_scroller_container .roundabout-holder {
    list-style:none;
    height:400px;
    margin:0px auto 20px auto;
}
/* Portfolio Styles */
.portfolio_item {
    width:223px;
    position:relative;
    margin:0 14px 28px 14px;
    padding:0;
}
.portfolio_item img {
    padding:5px;
    border: 1px solid #aaaaaa;
    width:211px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background:#f9f9f9;
    margin-bottom:0px;
}
.portfolio_item span {
    display:none;
}
.portfolio_item:hover img {
    -webkit-box-shadow:0px 0px 20px #787878;
    -moz-box-shadow:0px 0px 20px #787878;
    background:#f9f9f9;
}
.portfolio_item:hover span {
    display:inline;
    position:absolute;
    bottom:6px;
    right:6px;
    padding:10px 15px;
    background:#f9f9f9;
    color:#000000;
    z-index:999;
    border-left:1px solid #aaaaaa;
    border-top:1px solid #aaaaaa;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topLeft: 5px;
}
/* Blog Post Styles */
.post a:hover {
    text-decoration:underline;
}
.post .title {
    color:#393939;
    font-family:"Lucida Sans", "Helvetica", "Segoe UI", "Arial", "BitStream vera Sans";
}
.post .title a {
    color:#393939;
    text-decoration:none;
}
.post a.button:hover {
    text-decoration:none;
}
.post .sub {
    font-size:12px;
    color:#9d9d9d;
}
.post .thumb {
    width:619px;
    height:150px;
    padding:5px;
    border: 1px solid #cccccc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
/* Comment's List */
.commentlist {
    margin:0;
    padding:0;
    margin-bottom:20px;
    float:left;
    width:100%;
}
.commentlist li {
    width:100%;
    clear:both;
    float:left;
    padding:0;
    list-style-type:none;
    margin:0;
    position:relative;
}
.gravatar {
    float:left;
    width:60px;
    padding:0px 10px 0 0;
    text-align: center;
}
.gravatar img {
    display:block;
    padding:5px;
    padding-left:none;
    margin-bottom:0px;
}
.comment_content {
    float:left;
    width:569px;
}
.commentmetadata {
    float:right;
}
.comment-reply-link {
    text-decoration:none;
    font-size:10px;
}
.author_name {
    font-weight:bold;
    font-style:normal;
    font-size:15px;
    float:left;
}
.author_name a {
    color:#000000;
}
.comment_text {
    clear:both;
    margin-top:10px;
}
.comment-reply-link {
    text-align:center;
    display:block;
}
/* Contact Form */
 p.error {
    margin-left:140px;
    margin-top:10px;
}
#contact_form ul {
    float:left;
}
#contact_form ul li {
    margin:10px 0;
    list-style:none;
    position:relative;
    clear:both;
}
#contact_form label {
    line-height:35px;
    width:100px;
    text-align:right;
    float:left;
    margin-right:10px;
}
#contact_form input#name, #contact_form input#email, #contact_form input#subject, #contact_form textarea {
    float:left;
    padding:8px;
    border:1px solid #CCCCCC;
    margin-left:10px;
    background:#fcfcfc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#contact_form input#name, #contact_form input#email, #contact_form input#subject {
    width:400px;
}
#contact_form textarea {
    width:500px;
    height:150px;
    resize: none;
}
#contact_form input.button {
    float:right;
}
/* Comment form */
#commentform ul {
    float:left;
}
#commentform ul li {
    margin:10px 0;
    list-style:none;
    position:relative;
    clear:both;
}
#commentform label {
    line-height:35px;
    width:100px;
    text-align:right;
    float:left;
    margin-right:10px;
}
#commentform input, #commentform textarea {
    float:left;
    padding:8px;
    border:1px solid #CCCCCC;
    margin-left:10px;
    background:#fcfcfc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#commentform input {
    width:400px;
}
#commentform textarea {
    width:500px;
    height:150px;
    resize:none;
}
/* Contact Page Sidebar */
.contact ul {
    list-style:none;
}
.contact li {
    margin:0;
}
/* Overiding Classes */
/* Must remain at the bottom of the stylesheet */
.clearfix:after {
    clear:both;
    content:' ';
    display:block;
    font-size:0;
    line-height:0;
    visibility:hidden;
    width:0;
    height:0;
}
* html .clearfix {
    height:1%;
}
.alpha {
    margin-left:0;
}
.omega {
    margin-right:0;
}
.sorting {
    background:none repeat scroll 0 0 #F9F9F9;
    border:1px solid #DFDFDF;
    margin:15px auto 39px;
    padding:20px 10px;
}
.sorting h4 {
    color:#999999;
    font-size:14px;
    font-weight:normal;
    letter-spacing:0;
    margin-bottom:5px;
}
.sorting h2 {
    color:#4A4A4A;
    font-size:32px;
    font-weight:bold;
    letter-spacing:0;
    line-height:1.1em;
}
.sorting p {
    text-indent:2em;
}
.sort_by {
    float:right;
}
.sort_by li {
    display:block;
    float:left;
    font-size:12px;
    line-height:18px;
}
.sort_by li a {
    background:none repeat scroll 0 0 #E6E6E6;
    border:1px solid #B3B3B3;
    display:block;
    margin-right:4px;
    margin-top:2px;
    padding:2px 8px 3px;
}
.sort_by li a:hover, .sort_by li a.current {
    background-color:#890000;
    border-color:#890000;
    color:#FFFFFF !important;
}
#searchform {
    margin:25px auto;
}
.rsswidget {
    font-size:16px;
}
.rsswidget img {
    margin:0px;
}

如此，我们便完成了侧边的一次简单定制，现在我们可以在侧边栏中看到标签云了。

侧边栏拥有极强的定制性，相信您一定可以想到更多有趣的内容。

WordPress主题： 7 / 14

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：

原文出处：Yiiven https://cloud.tencent.com/developer/article/2193206

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-02-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
php
wordpress
网站建设
腾讯云开发者社区

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

php
wordpress
网站建设
腾讯云开发者社区
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • WordPress主题： 7 / 14
相关产品与服务
网站建设
网站建设（Website Design Service，WDS），是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务，无需了解代码技术，即可自由拖拽模块，可视化完成网站管理。全功能管理后台操作方便，一次更新，数据多端同步，省时省心。使用网站建设服务，您无需维持技术和设计师团队，即可快速实现网站上线，达到企业数字化转型的目的。
产品介绍产品文档
618年中盛惠，限时抢
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论