跳到主要内容

如何添加页脚友情链接在小工具里面?

把网站友情链接做的好看又大方,是每个网站管理员网站优化时关心的事情。既能控制友情链接出现的位置,如footer,又能控制该footer只出现在首页is_home(),同时还能满足自定义小工具Widget area,能够调用widget id,那么,这确实需要一系列的条件。

创建小工具

首先,通过widgets_Areas.php来自定义创建小工具,(另外一个相关的是widgets-ini.php)

<?php
/**
 * WidgetAreas
 *
 */
		// If widget areas are defined add a sidebar area for each
		if ( is_array( $this->widget_areas ) ) {
			foreach ( array_unique( $this->widget_areas ) as $widget_area ) {
				$widget_area = wp_strip_all_tags( $widget_area );
				$args = array(
					'id'			=> sanitize_key( $widget_area ),
					'name'			=> $widget_area,
					'class'			=> 'wpex-custom',
					'before_widget' => '<div id="%1$s" class="sidebar-box widget %2$s clr">',
					'after_widget'  => '</div>',
					'before_title'  => '<' . $tag_escaped . ' class="widget-title">',
					'after_title'   => '</' . $tag_escaped . '>',
				);
				register_sidebar( $args );
			}
		}
	}

当然我需要改变一下格式,那么我就把class先取消掉,

foreach ( $sidebars as $k => $v )

{ $args = array( ‘id’ => sanitize_key( $k ), ‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-box widget %2$s clr”>’, 中的class删掉。(不是找到wp-actions里面的widgets-ini,而是/www.mgsh.com.cn/wp-content/plugins/mgsh-theme-core/inc/widgetscore/inc/widgets)

重启php服务器,好了一半。

调整样式

接着,放入footer.php中,决定在这里调整style和class

<?php if (is_active_sidebar('friend-links')) : ?><?php endif; ?>
<div style="background:#262626;color:gray;bottom:-50px" class="footer-bottom-flex" >
<?php if (!dynamic_sidebar('friend-links')) : ?><?php endif; ?>
</div>

然后,将自定义的小工具里面用文本的方式活着HTML的方式潜入友情链接即可。

经测试文本和其他模板都有格式问题,不要使用文本做友情链接,文本的小工具自动产生<p></p>标签,导致底部自动增加20px,产生多余位置;纯粹的代码还是要用HTML,完美解决。

遗留问题:

line-height: 50px 的 element.style,让友情链接换行很难看,想把50px换成30px;

<?php if (is_active_sidebar('friend-links')) : ?><?php endif; ?>
<div id="friend-links" style="background:#262626;color:gray">
<span style="line-height: 30px;"><?php if (!dynamic_sidebar('friend-links')) : ?><?php endif; ?> </span>
</div>

控制友链在首页

最后,如果还想对该widget进行操作,只对首页显示,对其他页面不显示,那么需要再对widget进行logic逻辑处理。

补充:class 通过 空格 来调用多个类,.和#的扩展知识:

. 点 表示 一个class类, 类可bai以被多个标签调用
,表示具有统一du属性的样式联合写在一起 以达到节省zhi代码的作用
#表示daoID, id是具有唯一性的,一个页面只能引用一次,而 . class可以多次重复使用。
例子:
<a href=”#” class=”a”>我是红色连接</a>
<a href=”#” class=”a”>我也是红色连接</a>
.color{color:red;}
,例子
.a{color:#red;font-size:14px;}
.b{color:#red;font-size:16px;}
.c{color:#red;font-size:18px;}
可以看到他们都一 个共同的特点那就是color:red;这是我们可以简单缩写成:
.a,.b,.c{color:#red}
.a{font-size:14px;}
.b{font-size:16px;}
.c{font-size:18px;}
而id就一个页面就只有一个,他的css优先级也是最高的,如果一个标签同时含有一 class和一个id,而id和class里都一个相同类型的定义的话,会最终以id的样式优先。
如:
.a{color:red;}
#b{color:#000;}
<a href=”#” class=”a” id=”b”>我是id优先:黑色连接</a>

延伸阅读:

SEO超链接的nofollow和_blank设置原则是什么?

SEO那些事之友情链接门当户对

品牌霸屏优化案例是怎么做到的?

有价值的SEOer应该具备哪些能力?

返回顶部