今天给大家分享一下,关于本站“SNS分享”按钮的制作办法。那么操作之前,我们要讲一些模板的常识。

Joomla的高明之处,所有的组件、模块都支持在模板中DIY,不难发现,模板文件夹中都有个叫html的文件夹,这就是用来存放组件、模块的定制模板的地方,在K2 分类模板配置及分类参数设置详解及修改[一] 一文中,我们有提到K2的模板设置,joomla自带文章的DIY也是如此。

找到目录:\components\com_content\views\

可发现有5个文件夹,分别为archive(活动)、article(文章)、category(分类)、frontpage(首页)、section(单元),按照MCV开发模式,这里的所有文件夹就是管V的,我们就叫他模板吧,joomla的开发者做这些文件夹,就是考虑到我们要自定义!但不是让我们直接改这些文件夹中的核心文件,否则版本升级后,所做的修改也是失效的。

这时候,joomla让我们将这些文件转移到模板文件夹中的html进行DIY定制,我们以常用的article(文章)、category(分类)、frontpage(首页)、section(单元)为例。

将这些文件夹复制至\templates\jk_Joomla178\html\com_content\中(jk_Joomla178替换成你设计或使用的模板,如果模板html中没有com_content的文件夹,可以新建一个)

复制了这些文件之后,我们还需要将多余的配置文件删除

将\templates\jk_Joomla178\html\com_content\article\tmpl\中的所有php文件剪贴到\templates\jk_Joomla178\html\com_content\article\中,其它文件全部删除

将\templates\jk_Joomla178\html\com_content\category\tmpl\中的所有php文件剪贴到\templates\jk_Joomla178\html\com_content\category\中,其它文件全部删除

同样道理,frontpage和section文件夹下也执行同样的操作。操作到这里,我们就已经将com_content这个自带组件的模板文件创建成功了,也就是说这个时候,\components\com_content\views\中的模板文件的功能就被\templates\jk_Joomla178\html\com_content\中的模板文件功能替换掉。

 

以上都是说明关于joomla的组件模板文件的创建方法(模块也是同样道理 )

那么我们现在就需要在具体文章内容中加入SNS分享按钮,现在第三方分享按钮做的比较火的应该是jiathis.com,这里我们就以jiathis.com为例,登陆jiathis.com,然后按照加网给的提示生成了一段JS代码,编者生成按钮式代码如下:

<!-- JiaThis Button BEGIN -->
<a href="http://www.jiathis.com/share/" class="jiathis" target="_blank"><img src="http://v1.jiathis.com/code/images/jiathis2.gif" border="0" /></a>
<script type="text/javascript" src="http://v1.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

 

然后需要找到文章内容页的模板文件,也就是我们上文中已创建好的\templates\jk_Joomla178\html\com_content\article\default.php文件,比如我们现在想要把这个分享按钮加到“打印图标”的左边!

那么找到打印图标的代码,可以通过火狐的firebug插件查找相关的打印图标代码,即是

<?php if ($this->params->get('show_pdf_icon')) : ?>
<td align="right" width="100%" class="buttonheading">
<?php echo JHTML::_('icon.pdf',  $this->article, $this->params, $this->access); ?>
</td>
<?php endif; ?>

添加分享后的代码为:

<td align="right">
<!-- JiaThis Button BEGIN -->
<a href="http://www.jiathis.com/share/" class="jiathis" target="_blank"><img src="http://v1.jiathis.com/code/images/jiathis2.gif" border="0" /></a>
<script type="text/javascript" src="http://v1.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
</td>
params->get('show_pdf_icon')) : ?>
<td align="right" width="100%" class="buttonheading">
<?php echo JHTML::_('icon.pdf',  $this->article, $this->params, $this->access); ?>
</td>
<?php endif; ?>

保存该文件之后,尝试清空缓存、刷新前台!即能看到这串分享的按钮,不过要在后台开启“PDF、打印、EMAIL”的图标功能!

这种在文章内容指定位置安插SNS分享按钮稍微复杂了点,其实我们可以通过jiathis.com的侧栏式工具,添加在模板\templates\jk_Joomla178\index.php文件中

例如我们获取到的侧栏式按钮代码

<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v1.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

将这段代码添加到index.php的</body>标签前面即可!

原创文章转载请标明出处,请引用本文地址:Joomla模板教程-创建SNS分享按钮

除特殊标明文章转自第三方网站,文章均由JOOMLASK.COM原创提供
欢迎友情转载,请务必保留本文出处并引用本文链接: Joomla模板教程-创建SNS分享按钮

智能搜索

支付宝官方话费充值

淘宝充值