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

2021年2月5日
EBRP研究
网站搭建

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

创建小工具

首先，通过widgetsAreas.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/…里面的WidgetAreas.php

重启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>

创建小工具

调整样式

控制友链在首页

你可能还感兴趣：