wordpress twentyseventeen 社交媒体共享图标,无需插件建议。
wordpress twentyseventeen social media share icons without plugin advice needed.
我很好奇这是否是将社交媒体 SVG 图标添加到页面和 post 类型(不使用插件)的最佳做法?
我已将三个自定义字段添加到 WordPress 页面和 post。 facebook、twitter 和 google 加上字段我添加了 WordPress 提供的 SVG 标签,这些标签特定于每个社交媒体网站。
wordpress page admin screenshot
这是我添加到首页的代码,我需要在其中添加社交分享图标
<header class="entry-header-hp">
<div class="page-title-homepage">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
<nav class="social-naviation-news" role="navigation">
<div>
<ul>
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink()); ?>" target="_blank"><?php echo the_field('facebook'); ?>
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>+<?php echo get_permalink(); ?>" target="_blank">
<?php echo the_field('twitter'); ?>
</a>
</li>
<li>
<a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">
<?php echo the_field('Google'); ?>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="entry-meta">
<?php echo the_modified_date(); ?>
</div><!-- .entry-meta -->
<div class="edit-link">
<?php twentyseventeen_edit_link( get_the_ID() ); ?>
</div>
</header><!-- .entry-header -->
如您所见,图标将显示在首页上。
https//staging.rockimages.com
这是一个好方法还是会导致任何问题?
这不会导致问题,但我建议您以可重复使用且不需要在多个页面模板上进行批量更改的方式构建共享元素。所以基本上用它做一个函数并将它放在你的主题的 functions.php
文件中。此外,如果您使用任何默认的 Wordpress 主题,请确保复制原始主题并重命名或创建子主题。
参考:
https://premium.wpmudev.org/blog/five-hacks-twenty-seventeen/#social
https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/
我很好奇这是否是将社交媒体 SVG 图标添加到页面和 post 类型(不使用插件)的最佳做法?
我已将三个自定义字段添加到 WordPress 页面和 post。 facebook、twitter 和 google 加上字段我添加了 WordPress 提供的 SVG 标签,这些标签特定于每个社交媒体网站。 wordpress page admin screenshot
这是我添加到首页的代码,我需要在其中添加社交分享图标
<header class="entry-header-hp">
<div class="page-title-homepage">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
<nav class="social-naviation-news" role="navigation">
<div>
<ul>
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink()); ?>" target="_blank"><?php echo the_field('facebook'); ?>
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>+<?php echo get_permalink(); ?>" target="_blank">
<?php echo the_field('twitter'); ?>
</a>
</li>
<li>
<a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">
<?php echo the_field('Google'); ?>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="entry-meta">
<?php echo the_modified_date(); ?>
</div><!-- .entry-meta -->
<div class="edit-link">
<?php twentyseventeen_edit_link( get_the_ID() ); ?>
</div>
</header><!-- .entry-header -->
如您所见,图标将显示在首页上。 https//staging.rockimages.com
这是一个好方法还是会导致任何问题?
这不会导致问题,但我建议您以可重复使用且不需要在多个页面模板上进行批量更改的方式构建共享元素。所以基本上用它做一个函数并将它放在你的主题的 functions.php
文件中。此外,如果您使用任何默认的 Wordpress 主题,请确保复制原始主题并重命名或创建子主题。
参考:
https://premium.wpmudev.org/blog/five-hacks-twenty-seventeen/#social https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/