wordpress文章页底部版权提示代码美化

Wordpress 8个月前 acg
213 次浏览 0

如果自己的文章写的很棒,别人看到了想转载,但是又不知道你能不能同意,这个时候就有点麻烦了。这次带来的wordpress美化教程就可以在你的文章底部添加一些有趣的信息,给你的网站访客展现更多有趣的内容,例如转载声明或是加群链接。

  • 效果演示:Demo

效果如下:

wordpress文章页底部版权提示代码美化

如何实现呢?

将以下代码添加至主题根目录的functions.php文件<?php下,然后根据代码中的提示换上自己需要的内容以及图片即可。

  1. //在所有文章底部添加自定义内容
  2. function add_after_post_content($content) {
  3. if(!is_feed() && !is_home() && is_singular() && is_main_query()) {
  4. $content .= '
  5. <style>
  6. .hh_wenzhangjieshu{padding:30px 0;text-align: center;border-top: double rgba(70, 139, 230, 0.14);}
  7. .hh_wenzhangjieshu img{border:0;text-align:center;box-shadow:none;}
  8. .hh_content_footer{width:100%;height:200px;box-shadow: 0 0px 1px #d9e0eae3;margin-top:0px}
  9. .hh_content_footer .item_top_left{padding:20px;float:left;}
  10. .hh_content_footer .item_top_left p{line-height:14px;font-weight:600;font-size:12px;padding-left: 7px;}
  11. .hh_content_footer .item_top_left h3{color:#f7516c;font-size:18px;font-weight:600;}
  12. .hh_content_footer .item_top_right{float:right;padding: 20px 50px 20px 20px;}
  13. .hh_content_footer .item_top_right .hh_erweima{width:80px;height:80px;background:#f7f7f7;float:left;margin-right:15px;margin-top:15px;padding: 6px;}
  14. .hh_content_footer .item_top_right .hh_qqqun{float:left;margin-left: 20px;}
  15. .hh_content_footer .item_top_right .hh_qqqun img{width: 80px;height: 80px;margin: 0 51px 0 0;float: left;}
  16. .hh_content_footer .item_top_right .hh_qqqun .spanQ1{background:#f4f8ff;}
  17. .hh_content_footer .item_top_right .hh_qqqun .spanQ3{margin: 20px 0 10px;}
  18. .hh_content_footer .item_top_right .hh_qqqun .spanQ2{margin: 10px 0 0;}
  19. .hh_content_footer .item_top_right .hh_qqqun a{display:block;background:#f4f8ff;line-height:30px;border-radius: 15px;margin-top:15px;text-align:center}
  20. .hh_content_footer .item_top{width:100%;height:118px;}
  21. .hh_content_footer .item_bottom {width:100%;float: right;}
  22. .hh_content_footer .item_bottom .item_bottom_left{float:left;margin-left: 27px;}
  23. .hh_content_footer .item_bottom .item_bottom_left a{float:left;text-align: center;padding: 7px 20px;display:block;margin-right:20px;color:#fff;font-weight:600;border-radius: 4px;position: relative;top:-5px;}
  24. .hh_content_footer .item_bottom .item_bottom_right{float:right;font-weight:600;color:#666;margin-right: 44px;}
  25. .hh_content_footer .item_bottom:before{width:100%;height:1px;background: #e6f0ff;display:block;margin-bottom: 20px;}
  26. .hh_content_footer .hh_button_jianbian01{background:linear-gradient(to left,#70a4fe,#4583ec)}
  27. .hh_content_footer .hh_button_jianbian02{background:linear-gradient(to left,#fe9369,#f7516c)}
  28. .hh_content_footer .hh_button_jianbian03{background:linear-gradient(to left,#c867ff,#8a92fb)}
  29. .hh_content_footer .hh_button_jianbian01:hover{background:linear-gradient(to left,#4583ec,#70a4fe)}
  30. .hh_content_footer .hh_button_jianbian02:hover{background:linear-gradient(to left,#f7516c,#fe9369)}
  31. .hh_content_footer .hh_button_jianbian03:hover{background:linear-gradient(to left,#8a92fb,#c867ff)}
  32. @media (max-width:767px){
  33. .hh_content_footer{height:360px;}
  34. .hh_content_footer .item_top_right{float: none;position: relative;top: -23px;}
  35. .hh_content_footer .item_bottom{margin-top:30px}
  36. .hh_content_footer .item_bottom .item_bottom_right{float:none;margin-top: 61px;text-align: center;}
  37. }
  38. .hh_qqqun a img{position: relative;top: 7px;right: 2px;}
  39. </style>
  40.        <div style="text-align: center;" class="hh_wenzhangjieshu"><img src="图片URL"/></div>
  41. <div class="hh_content_footer">
  42. <div class="item_top">
  43. <div class="item_top_left">
  44.        <h3>【Npcink】温馨提醒:</h3>
  45. <p>本站所有文章都可以进行提问,有问必答,欢迎骚扰!</p>
  46. <p>如果您喜欢我们,请收藏本站,您将得到更好的服务。 如有侵权请邮件与我们联系处理。 </p>
  47. </div>
  48. <div class="item_top_right"><div class="hh_qqqun">
  49. <br>
  50.            <img src="图片URL">
  51. <!-- <span class="spanQ1 spanQ3">QQ交流群</span>
  52. <br>
  53. <span class="spanQ1 spanQ2">QQ交流群</span> -->
  54. </div></div>
  55. </div>
  56. <div class="item_bottom">
  57. <div class="item_bottom_left">
  58. <a href="/bubble" class="hh_button_jianbian01" target="_blank">投诉建议</a>
  59. <a href="/vips" class="hh_button_jianbian02" target="_blank">购买会员</a>
  60. <a href="/shop" class="hh_button_jianbian03" target="_blank">服务商城</a>
  61. </div>
  62. <div class="item_bottom_right">
  63. © 转载请联系作者,私自转载视为侵权!
  64. </div>
  65. </div>
  66. </div>';
  67. }
  68. return $content;
  69. }
  70. add_filter('the_content', 'add_after_post_content');

我有意见:

在一些主题上面,移动端的效果不行,那就在移动端只留下文字声明吧。在主题根目录下的style.css文件的底部添加以下代码:

  1. /*移动端隐藏部份版权声明*/
  2. @media (max-width: 767px){
  3. .hh_content_footer .item_bottom {display:none;}
  4. .hh_content_footer .item_top_right {display:none;}
  5. .hh_content_footer {
  6. height: 2px!important;
  7. }
  8. .hh_wenzhangjieshu {display:none;}
  9. }

当然,如果你在移动端不需要这个版权声明,可以在主题根目录下的style.css文件的底部添加以下代码 :

  1. /*移动端隐藏版权声明*/
  2. @media (max-width: 767px){
  3. .hh_wenzhangjieshu {display:none;}
  4. .hh_content_footer{display:none;}
  5. }
版权声明:acg 发表于 2020-11-27 9:21:10。
转载请注明:wordpress文章页底部版权提示代码美化 | ACGPK精选导航网

暂无评论

暂无评论...