法人・個人事業主向けの新サービスAmazonビジネス→【詳細はこちら】

STORKでFont Awesome 5アップデート後に修正したところ

ストークFont-Awesomeアップデート

気がつけば「WordPressテーマ「ストーク」 」を1年以上使ってるカゲオです。(2018年8月現在は「SANGO」)

今回「Font Awesome 5」にアップデートした際に、旧コードでバグった箇所があったので修正方法を書きました。

メモ
WordPressテーマ「ストーク」 」のデフォルトではバージョン「4.6.0」を読み込んでいます。

今回の修正は「FTPソフト」を使うので、使い方がわからない方は先にこちら記事へ。

WordPress子テーマ Cyberduckの使い方WordPressの子テーマを分かりやすく解説

1・Font Awesome 5をテーマに読み込ませる

「FontAwesome5」を使用する方法は2つありますが、今回紹介するサイトに読み込ませる方法がオススメです。

初めて「Font Awesome 5」を使用する方は、「WordPressテーマ「ストーク」 」の親テーマから「header.php」ファイルを子テーマにコピーする必要があります。

その中に<head>という緑色のコードがあるので、その下に以下の新コードをコピペしてください。

テーマヘッダーの編集方法

注意

通常は<head>の下にコードを入れるんですが、当サイトでは「Facebook」の一部アイコンで表示崩れが起きたので<body>の下に変更しました。

原因はわかっていません。

テーマヘッダー編集画面

「外観」

「テーマ編集」

「テーマヘッダー」

「指定コードをコピペ」

「ファイルを更新」

一応、新旧両方のコードを載せておきます。

旧コード

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

新コード

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
v5.1.0はバージョンの指定です。(2018年7月7日時点)では最新バージョンですが、時々アップデートされるので表示されないアイコンがあったらバージョンを確認してみてください。Font Awesome 5のバージョン確認Font Awesome 5バージョン情報
メモ

新コードにはもう1つ「SVG用」のものがありますが、そちらはさらに表示が崩れるので「CSS用」コードの方がオススメです。

2・今回修正するファイルを子テーマにコピー

以下の2つのファイルを「親テーマ」から「子テーマ」にコピーしてください。

「parts_sns_short.php」
「parts_sns.php」

3・タイトル下SNSアイコンコードの編集

「parts_sns_short.php」ファイルのコードを編集します。

当サイトでは表示していませんが、以下の部分がこんな感じで表示されなくなります。

ストーク記事下SNSアイコンバグ

12行目〜「Twitter」

<li class="twitter"> 
<a target="blank" href="http://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="fa 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>

fa fa-twitterの部分をfab fa-twitterに置き換えてください。

16行目〜「Facebook」

<li class="facebook">
<a href="http://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="fa fa-facebook"></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>

fa fa-facebookの部分をfab fa-facebook-fに置き換えてください。

25行目〜「Google+」

<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>

fa fa-google-plusの部分をfab fa-google-plus-gに置き換えてください。

29行目〜「Pocket」

<li class="pocket">
<a href="http://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="fa 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>

fa fa-get-pocketの部分をfab fa-get-pocketに置き換えてください。

「ファイルを更新」をクリックして、タイトル下のSNSアイコンを確認してください。

4・記事下SNSアイコンコードの編集

「parts_sns.php」ファイルのコードを編集します。

ストーク記事下SNSアイコンバグ

17行目〜「Twitter」

<li class="twitter"> 
<a target="blank" href="http://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="fa 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>

fa fa-twitterの部分をfab fa-twitterに置き換えてください。

21行目〜「Facebook」

<li class="facebook">
<a href="http://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="fa fa-facebook"></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>

fa fa-facebookの部分をfab fa-facebook-fに置き換えてください。

30行目〜「Google+」

<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>

fa fa-google-plusの部分をfab fa-google-plus-gに置き換えてください。

34行目〜「Pocket」

<li class="pocket">
<a href="http://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="fa 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>

fa fa-get-pocketの部分をfab fa-get-pocketに置き換えてください。

「ファイル更新」をしてサイトをにアイコンが表示されていればOKです。

5・サイドバーとフッターの確認も忘れずに

フッターやサイドバーにウィジェットで旧コードを使用している場合は、表示崩れがないか合わせて確認しておいてください。

6・本文内の旧コードを編集する

本文内でも旧コードを使用している場合があると思います。

少しであれば、上記で説明した通り手動で変更しても構いませんが、大量にある場合は「Search Regex」というプラグインを使ってサクッとやっちゃいましょう。

Search-Regexインストール方法

「管理画面」

「プラグイン」

「新規追加」

「Search Regex」を検索

「Search Regex」を今すぐインストール

「有効化」

「管理画面」

「ツール」

「Search Regex」

使い方は画像の通りです。

Search-Regexの使い方

「Search pattern」に旧コードを入力。

「Replace pattern」に新コードを入力。

「Raplace」をクリック。

「変更前と変更後のコードを確認」

「Replace&Save」で一括変換

これで本文内のコードは全て変更されます。

まとめ

今回私のストーク環境下で確認できた修正箇所を紹介しました。

他にもあるかもしれないので何かあれば追記します。

デザイン思考が世界を変える

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。