无脚本社交分享,轻量级社交分享按钮插件

 
无脚本社交分享,轻量级社交分享按钮插件

正如我已经不止一次说过的,我通常为在WordPress下运行的博客做小工作。 优化用于在WordPress下运行的博客。我所应用的一切,通常在这里之前都会进行测试和测量,最后我把笔记变成一个帖子,作为提醒,以防对某人有用。这就是其中之一。

有时真正减慢加载速度的事情之一是社交网络上那些蹩脚的社交分享按钮,因为它们要么带有沉重的视觉假象、计数器和下拉滚动,要么即使在不使用它们的地方也会加载请求,或者一下子加载。

无脚本社会共享是一个轻量级的免费插件,可以将典型的按钮添加到你的文章和/或页面中,该插件由以下公司开发 Robin Cornett这就免除了这一切。

它是如此轻量级,以至于它只是使用每个网络允许的最基本的方法添加分享链接。没有javascript,没有动画,没有计数器,没有花哨的东西。它只是用自己的一点点CSS建立了一组链接。其结果是,它将请求减少到零,没有

它有一个设置页面,也非常简单,所以你可以调整哪些类型的内容应该有分享按钮,哪些按钮应该被添加,以及是否使用该插件的样式。除此之外,你还可以使用一个过滤器来添加任何其他托管其相应.SVG图标的网络。

该插件所做的一切都可以通过注册图标手工完成,但由于它没有增加任何请求,其重量最小,代码干净,所以它是节省一点工作的最佳选择之一。

无脚本社交分享,轻量级社交分享按钮插件 1

它的作者宣称与WordPress 5.8完全兼容,虽然它没有宣布与WordPress 5.8兼容,但它在新版本中完美地工作。 WordPress 5.9它在新版本中完美运行,因为它没有增加任何新内容。

设置

默认情况下,当你激活该插件时,你会发现图标是这样的。

无脚本社交分享,轻量级社交分享按钮插件 2

或者像这样,如果你选择 "显示名字"。

无脚本社交分享,轻量级社交分享按钮插件 3

而这是图标设置在这里工作的截图,其结果是这样的。

无脚本社交分享,轻量级社交分享按钮插件 4
无脚本社交分享,轻量级社交分享按钮插件 5

但要使按钮显示为圆形,并添加Menéame按钮(或任何其他网络),只需拉动他们的过滤器来注册图标,并对CSS做一些修改。没有太复杂的东西。

添加一个新按钮的步骤

1- 搜索并下载你想添加的网络的.SVG图标,在这种情况下,我从Menéame找到了最好的一个,尽管它还可以改进。 是这样的.

2. 将图标上传到你的模板的 /assets/svg/目录下(如果这个路径不存在,你必须创建它),插件将识别它并自动使用它。

3.通过添加到你的功能插件中,将图标与相应的过滤器注册,使用 代码摘录或者用手把它添加到模板的 functions.php 中,方法由你决定。

add_filter( ‘scriptlesssocialsharing_register’, ‘prefix_scriptless_add_meneame_button’ );
/**
* Añade un botón personalizado a Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_meneame_button( $buttons ) {
$buttons[‘tumblr’] = array(
‘label’ => __( ‘Menéame’, ‘scriptless-social-sharing’ ),
‘url_base’ => ‘https://www.meneame.net/submit?url=’.get_permalink().’» target=»_blank’,
‘args’ => array(
‘query_args’ => array(
‘name’ => ‘%%title%%’,
‘url’ => ‘%%permalink%%’,
),
‘color’ => ‘#e35614’,
‘svg’ => ‘meneame-square’, //Subir a `assets/svg` de tu plantilla
‘icon’ => ‘f173’, // Para fuentes FontAwesome
),
);
return $buttons;
}

你需要调用你的图标文件"loquesea-square.svg",这样过滤器才能工作。

同样重要的是,你要注意有关网络的分享链接的确切结构,因为它需要被添加到 'url_base'中。在Menéame的例子中,它是https://www.meneame.net/submit?url='.get_permalink()。

最后,你只需要玩玩CSS,直到找到你想要的最终外观和位置,对于这个例子,我们使用了这个CSS。

如果一切顺利,你现在会发现在插件设置中添加了图标,你将能够命令它,删除它,或像其他默认图标一样将其设置为你自己的风格。

古腾堡块和短代码

该插件还为Gutenberg添加了一个块(你可以停用),允许你将按钮放在段落之间或某些内容元素下面。

Scriptless Social Sharing, el plugin de botones para compartir en redes sociales más ligero

你也有 短码这样你就可以把它们放在你想放的地方,并有可能限制在一个特定点上显示的网络。

添加[ ]。

通用 "短码。

scriptless

要删除标题或定制标题。

scriptless heading=""

只显示某些按钮(用逗号分隔,没有空格)。

scriptless buttons="email,facebook"

作者还在她的网站上添加了添加 Facebook Messenger按钮所需的具体过滤器。

还有其他的插件,也是轻量级的,具有更多的美学功能,但如果你热衷于加载速度,这个插件是完美的。作为一个轻量级的付费替代品,有一些更多的设计选项。 诺华股份(的创作者)。 绩效管理)也是一个非常好的选择。


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting