效果图:
一、准备工作
首先想好,制作的这个插件你打算挂载在什么位置。
比如:我想把插件挂载在侧边栏的底部,默认是没有这个钩子的,那就需要我们来自定义一个钩子。
添加自定义钩子:sidebar_end
文件地址:.\ThinkCMFX\app\portal\hooks.php
< php return [ 'sidebar_end' => [ "type" => 3,//钩子类型(默认为应用钩子;2:应用钩子;3:模板钩子;4:后台模板钩子) "name" => '侧边栏结束', // 钩子名称 "description" => "侧边栏结束", //钩子描述 "once" => 0 // 是否只执行一次 ], ];
模板中添加钩子:
<hook?name="sidebar_end"/>
注1:“type”=>3,模板钩子
注2:网站后台->钩子管理->同步钩子
二、制作插件
目录结构:
share_addthis ├─view │ └─widget.html └─ShareAddthisPlugin.php
ShareAddthisPlugin.php 文件
< php namespace plugins\share_addthis; use cmf\lib\Plugin; class ShareAddthisPlugin extends Plugin { public $info = [ 'name' =>'ShareAddthis', 'title' =>'Addthis分享', 'description' =>'页面分享效果插件', 'status' =>1, 'author' => 'Wien Designs', 'version' => '1.0', 'demo_url' => 'https://www.wien.ren', 'author_url' => 'https://www.wien.ren' ]; // 插件安装 public function install() { return true;//安装成功返回true,失败false } // 插件卸载 public function uninstall() { return true;//卸载成功返回true,失败false } //自定义sidebarEnd钩子方法 public function sidebarEnd($param) { echo $this->fetch('widget'); } }
widget.html 文件
<style type="text/css"> .addthis_toolbox a span{width:42px!important;height:42px!important;}/* 修改默认图标大小 */ .addthis_toolbox a span svg{width: inherit!important;height: inherit!important;} .addthis-top{display: flex;justify-content: space-around;} </style> <div class="addthis_toolbox addthis_default_style"> <div class="addthis-top"> <a class="addthis_button_linkedin"></a> <a class="addthis_button_wechat"></a> <a class="addthis_button_qzone"></a> <!--<a class="addthis_button_twitter"></a> <a class="addthis_button_facebook"></a> <a class="addthis_button_google_plusone_share"></a>--> <a class="addthis_button_sinaweibo"></a> <a class="addthis_button_compact"></a><div style="clear:both"></div> </div> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55754f584f46a708" async="async"></script>
这个插件非常的简单,就增加个自定义钩子,创建两个文件,js文件引用的是网络路径。
css的样式,可根据个人喜好自己修改。如有什么问题,下方留言或者直接联系我!