子比主题修改文章付费文字转为图标样式

子比主题的付费显示都是文字的形式来展示的,今天分享一个图标形式的方法,更美观更好看,喜欢的记得收藏保存。

演示图片

图片[1]-子比主题修改文章付费文字转为图标样式-夏天屋

源码部署

找到文件路径:themes\zibll\inc\functions\zib-posts-list.php第390行添加如下代码:

$svg = '<symbol id="icon-points" viewBox="0 0 1024 1024">
<path d="M419.886252 370.432927c119.605022 0 243.995044-26.302516 318.706976-76.460106v91.304594h69.207683V185.366307C807.800911 65.18189 607.999688 0.289697 420.006126 0.289697S32.091467 65.18189 32.091467 185.366307v545.629859c0 120.184417 199.801223 185.076609 387.794785 185.07661V846.984967c-197.463666 0-318.706976-67.579385-318.706976-115.978811V566.977553c74.711932 50.037714 198.992069 76.460105 318.706976 76.460105v-69.217673c-197.463666 0-318.706976-67.569395-318.706976-115.968822V294.102686c74.711932 50.027725 199.111944 76.330241 318.706976 76.330241z m0-301.045432c197.473655 0 318.706976 67.579385 318.706976 115.978812 0 48.399426-121.24331 115.978811-318.706976 115.978811s-318.706976-67.579385-318.706976-115.978811c0.00999-48.399426 121.363185-115.978811 318.706976-115.978812z m310.056015 338.925849c-171.740545 0-261.536715 66.060971-261.536714 131.29281v350.623625c0 65.231838 89.906055 131.292809 261.536714 131.29281 170.461881 0 260.128186-65.121953 261.526725-129.894271h0.119875V539.616143c-0.119875-65.241827-89.906055-131.302799-261.6466-131.302799z m0 69.097799c126.967329 0 192.438916 43.604437 192.438917 62.195011s-65.471587 62.195011-192.438917 62.195011-192.438916-43.604437-192.438916-62.195011 65.471587-62.195011 192.438916-62.195011z m0 475.013648c-126.967329 0-192.438916-43.604437-192.438916-62.195012v-83.712527c43.844186 23.855073 108.26687 39.758456 192.438916 39.758456 84.172047 0 148.474855-15.893393 192.438917-39.758456v83.712527c0 18.590574-65.471587 62.195011-192.438917 62.195012z m0-175.366756c-126.967329 0-192.438916-43.614426-192.438916-62.195011v-83.712527c43.844186 23.855073 108.26687 39.748466 192.438916 39.748466 84.172047 0 148.474855-15.893393 192.438917-39.748466v83.712527c0 18.580585-65.471587 62.195011-192.438917 62.195011z m0 0"></path></symbol>';

第394行代码是:

<span class="em09 ml3">' . $mark . '</span>

调用的代码是(把394行修改成下面这段):

<svg class="icon"><use xlink:href="#icon-points"></use></svg>

教程结束。

© 版权声明
喜欢就支持一下吧
点赞62 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容