WordPress しゅん

STORKでFONTAWESOME5を使えるようにする方法

スポンサードリンク

めちゃくちゃ簡単…というわけではないですが、比較的簡単に使えるようになる方法です。

事前準備として、子テーマをインストールしている状態にしておいてください。

まずは、この2ステップを踏んでください。これは絶対必要です。

テーマのカスタマイズから、グローバル設定の一番下にあるアイコンフォントの読み込み設定のFontawesomeを読み込まないにチェックを入れて保存。

WordPressのプラグイン新規追加からfontawesomeと入力し、画像と同じものをインストールして有効化します。

https://ja.wordpress.org/plugins/font-awesome/

これでとりあえず準備できました。

FA4の互換を保ったままなら簡単

ソースコードなんか気にしないって人はFontawesomeの設定をいじるだけで大丈夫です。

設定からFont awesomeを開いてこの画面を出します。

Remove unregistered clientsにチェックだけ入れて変更を保存します。

このチェックを入れることで、Fontawesomeの読込されている箇所があればブロックしますって意味です。テーマのカスタマイズから読込しないようにしていなくても、このチェックだけつけてれば大丈夫だと思いますが、念の為テーマ本体から読み込まない設定にした上でこのチェックもつけます。

これでFontawesome4と5のどっちもを生かしたまま使えるようになります。

Fontawesome5だけにする場合

これが少し面倒。まず設定をこうしましょう。

/* Change to FontAwesome 5 Free */
.entry-content a[target="_blank"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f08e';
}

.header-info a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f101';
}

#breadcrumb li.bc_homelink a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f015";
}

.menu-sp > ul:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f101";
}

.article-footer .post-categories a:before {
font-family: "Font Awesome 5 Free";
font-weight: normal;
content: '\f07b';
}

.article-footer .tags a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f292';
}

.authorbox .author_sns li a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f144";
}

.np-post .next a .eyecatch:after,
.np-post .prev a .eyecatch:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

.byline .date:before,
.byline .writer:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f101";
}

.byline .cat-name:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f08d";
}

.entry-content blockquote:before,
.entry-content blockquote:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

.widget.widget_categories li a:after,
.widget.widget_recent_entries li a:after,
.widget.widget_nav_menu li a:after,
.widget.widget_pages li a:after,
.widget.widget_archive li a:after,
.widget.widget_mycategoryorder li a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f054';
}

.readmore a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f105';
}

#reply-title:before {
font-family: "Font Awesome 5 Free";
font-weight: normal;
content: "\f27a";
font-size: 1em;
}

.nav_btn.search_btn:before {
font-size: 1.5em;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f002';
}

.nav_btn:before,
.search_btn:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f0c9';
}

.sp_g_nav > li > a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f054';
}

.footer-links li a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f0da';
}

/* remodal window close button */
.remodal-close:before {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
content: "\f00d";
}

/* shortcode */
.supplement:before {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
content: '\f0e6';
}

/* slick */
.slick-prev:before,
.slick-next:before {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}

 

設定できたら子テーマのstyle.cssに以下のCSSを追記します。

remodalとshortcodeとslickのCSS部分はfunction.phpにCSSの読み込み順序指定させてなんやかんやできればいいんですが、適応箇所もそんなに多くなかったのでimportantで済ませました。

あまりよろしくないんでしょうけど、まぁいいかなっていう吹っ切れです。

あとは記事内のSNS部分の指定ですね。

テンプレート内のparts_sns.phpとparts_sns_short.phpの2ファイルを子テーマへコピーします。

↓parts_sns.php

<?php
$url_encode=urlencode(get_permalink());
$site_title_encode=urlencode(get_home_url());
$title_encode=urlencode(get_the_title());
$tw_url = get_the_author_meta( 'twitter' );
$tw_domain = array("http://twitter.com/"=>"","https://twitter.com/"=>"","//twitter.com/"=>"");
$tw_user = '&via=' . strtr($tw_url , $tw_domain);
$rssencode = urlencode(get_bloginfo('rss2_url'));
$fdly_url = array("http%3A%2F%2F"=>"","https%3A%2F%2F"=>"");
$plainurl= strtr( $rssencode, $fdly_url );
?>

<div class="share">
<div class="sns">
<ul class="cf">

<li class="twitter">
<a target="blank" href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?><?php if(get_the_author_meta('twitter')) : ?><?php echo $tw_user ;?><?php endif ;?>&tw_p=tweetbutton" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><i class="fab fa-twitter"></i><span class="text">ツイート</span><span class="count"><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></span></a>
</li>

<li class="facebook">
<a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fab fa-facebook-square"></i>
<span class="text">シェア</span><span class="count"><?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></span></a>
</li>

<li class="hatebu">
<a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>" onclick="window.open(this.href, 'HBwindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><span class="text">はてブ</span><span class="count"><?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></span></a>
</li>

<li class="line">
<a href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><i class="fab fa-line"></i><span class="text">LINE</span></a>
</li>

<li class="pocket">
<a href="//getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fab fa-get-pocket"></i><span class="text">Pocket</span><span class="count"><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></span></a></li>

<li class="feedly">
<a href="https://feedly.com/i/subscription/feed/<?php echo urlencode(bloginfo('rss2_url')) ;?>" target="blank"><i class="fa fa-rss"></i><span class="text">feedly</span><span class="count"><?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></span></a></li>
</ul>
</div>
</div>

 

↓parts_sns_short.php

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
  $tw_url = get_the_author_meta( 'twitter' );
  $tw_domain = array("http://twitter.com/"=>"","https://twitter.com/"=>"","//twitter.com/"=>"");
  $tw_user = '&via=' . strtr($tw_url , $tw_domain);
?>
<div class="share short">
<div class="sns">
<ul class="cf">

<li class="twitter"> 
<a target="blank" href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?><?php if(get_the_author_meta('twitter')) : ?><?php echo $tw_user ;?><?php endif ;?>&tw_p=tweetbutton" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><i class="fab fa-twitter"></i><span class="text">ツイート</span><span class="count"><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></span></a>
</li>

<li class="facebook">
<a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fab fa-facebook-square"></i>
<span class="text">シェア</span><span class="count"><?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></span></a>
</li>

<li class="hatebu">       
<a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>" onclick="window.open(this.href, 'HBwindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><span class="text">はてブ</span><span class="count"><?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></span></a>
</li>

<li class="line">
<a href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><i class="fab fa-line"></i><span class="text">LINE</span></a>
</li>

<li class="pocket">
<a href="//getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fab fa-get-pocket"></i><span class="text">Pocket</span><span class="count"><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></span></a></li>

</ul>
</div> 
</div>

 

これで作業は完了です。

もしかしたら見落としの箇所があるかもしれません。あったらごめんなさい。

それでは快適なFontawesome5ライフを
(´◉ ω ◉`)ﾉｼ

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


RECOMMENDこちらの記事も人気です。