WordPress無料テーマ Stinger8で投稿者名を消してソーシャルアイコンを手直し
この記事を読むのに必要な時間は約 10 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
このStinger8 でも投稿と固定ページで表示されているので最初に消しておきたいところですね。
また、ソーシャルアイコンで既に使わないものがそのまま表示されていたりアイコンが表示できなくなっているのでまずその部分を修正します。
カスタマイズには子テーマの使用が必須？
テーマをカスタマイズしたり修正をしたりする場合は、Stinger8 に限らず子テーマを使うということをオススメします。
投稿者名を消すということとソーシャルアイコンの手直しをするということについては、 PHPのファイルをカスタマイズする必要があります。
親テーマをそのまま残しておく方が何かあったときに対処できたりすることも多いということと最初からダウンロードできるようになっているので使ってください。
今回のカスタマイズでは下記のファイルを親テーマから子テーマにコピペしてアップロードしておきます。アップロードは、FTPソフト でアップロードしてください。
- header.php
- page.php
- single.php
- sns.php
- sns-top.php
投稿者名を消す方法
投稿者名が表示されるとWordPressのIDがわかってしまいます。総当り攻撃などを受けないためにも表示させないようにしておきたいところです。また、画像にも記載していますが、Edit Author Slug を使ったとしてもWordPressのIDがオーナーリンクに反映されてしまいます。表示させないことが安全です。
上記は、single.phpになりますが、110行目の選択部分を削除します。削除後に1行スペースを詰めます。
また、page.phpの76行目を削除します。
|
1 |
<p>執筆者：<?php the_author_posts_link(); ?></p> |
削除後は、上書き保存しておきます。Windowsの場合は、文字コードがUTF-8になっていることをちゃんと確認しておいてください。
なぜ、ソーシャルボタンのアイコンが表示されないのか？
Stinger8 をインストールしたらこのような表示になっていました。画像にあるようにGoogle+は、既に投稿もできずに消えるのを待つだけなのでボタンの必要がありません。また、ほかのアイコンも表示されておりません。
これは、以前書いたLightning での記事 と同じ理由でした。中にはそのまま表示されている方もいるはずです。
要は、読み込んだスタイルシートと表示部分のスタイルシートの記述方法があってないということです。
Awesome Font Icon を使用しているのですが、そのバージョンによって記述方法が違うのでその部分を修正しないと表示できないということです。それは、インストールされているプラグインの影響もあるので今は、以前のバージョン4.7の記述方法よりはバージョン5系の記述方法を使う必要があるのです。
表示されるためには？
はてブ以外のアイコンを表示させるためには、Awesome Font Icon の記述をバージョン5系の記述に変更する必要があります。画像で選択されている部分は、バージョン4.7の記述方法になっているためこれを書き換えします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<ul class="clearfix"> <!--ツイートボタン--> <li class="twitter"> <a onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fab fa-twitter-square"></i><span class="snstext <?php echo $plug; ?>" >Twitter</span> <?php if(function_exists('get_scc_twitter')) { if( scc_get_share_twitter( array( 'post_id' => 'home' ) ) !== 0){ echo '<span class="snscount">'.scc_get_share_twitter( array( 'post_id' => 'home' ) ).'</span>'; }else{ echo '<span class="snstext pcnone" >Twitter</span>'; } }?></a> </li> <!--Facebookボタン--> <li class="facebook"> <a target="_blank" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fab fa-facebook"></i><span class="snstext <?php echo $plug; ?>" >Facebook</span> <?php if(function_exists('get_scc_facebook')) { if( scc_get_share_facebook( array( 'post_id' => 'home' ) ) !== 0){ echo '<span class="snscount">'.scc_get_share_facebook( array( 'post_id' => 'home' ) ).'</span>'; }else{ echo '<span class="snstext pcnone" >Facebook</span>'; } }?></a> </li> <!--ポケットボタン--> <li class="pocket"> <a onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;" ><i class="fab fa-get-pocket"></i><span class="snstext <?php echo $plug; ?>" >Pocket</span> <?php if(function_exists('get_scc_pocket')) { if( scc_get_share_pocket( array( 'post_id' => 'home' ) ) !== 0){ echo '<span class="snscount">'.scc_get_share_pocket( array( 'post_id' => 'home' ) ).'</span>'; }else{ echo '<span class="snstext pcnone" >Pocket</span>'; } }?></a></li> <!--はてブボタン--> <li class="hatebu"> <a href="//b.hatena.ne.jp/entry/<?php home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php bloginfo('name'); ?>"><span style="font-weight:bold" class="fa-hatena">B!</span><span class="snstext <?php echo $plug; ?>" >はてブ</span> <?php if(function_exists('get_scc_hatebu')) { if( scc_get_share_hatebu( array( 'post_id' => 'home' ) ) !== 0){ echo '<span class="snscount">'.scc_get_share_hatebu( array( 'post_id' => 'home' ) ).'</span>'; }else{ echo '<span class="snstext pcnone" >はてブ</span>'; } }?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> <!--LINEボタン--> <li class="line"> <a target="_blank" href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="fab fa-line"></i><span class="snstext" >LINE</span></a> </li> <!--FEEDLYボタン--> <li class="line"> <a href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Fsocial908.com%2Fnormal%2Ffeed%2F' target='blank'><i class="fas fa-rss-square"></i><span class="snstext" >FEEDLY</span></a> </li> </ul> |
上記のソースをsns.phpとsns-top.phpで書き換えます。ただ、feedlyについては、後で自分のアドレスに変更する必要があります。そのまま使うと当サイトのテストサイトのフィードが購読されてしまいます。
使わないソーシャルアイコンとは？
先述にもあるようにGoogle+は、廃止されるのでもう投稿ができません。4月でしたか完全に消えるとのことでソーシャルボタンは、必要なくなりました。通常ですとアップデートなどで変更される部分なのですが、Stinger8 ではアップデートがないので自分で修正するしかないということです。前の項目で表示しているソースでGoogle+は、削除されています。代りにfeedlyを追加して3X2でバランスよくしています。
feedlyを追加するには？
カスタマイズソースでは、feedly を追加しています。feedly のボタンを追加する方法を解説します。これは、フェレットさんのサイトで紹介されていた方法を参考にしています。
https://www.feedly.com/factory.html
上記のサイトでリンクを作成します。
最初にボタンを選ぶのですが、ボタンは無視してOKです。初期のスタイルと合わせるためにボタンは、使用しません。
feedのURLを入力します。
WordPressの場合は、カスタマイズなどしていない場合は、下記の通りです。
http://あなたのドメイン/feed/
上記で生成されたコードを一部で使ってカスタマイズします。これは、元々のStinger8 スタイルに合わせるためのカスタマイズが必要だからです。
というわけで最初のリンク部分だけをコピペします。
|
1 2 3 4 |
<!--FEEDLYボタン--> <li class="line"> <a href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2F*****.com%2Fnormal%2Ffeed%2F' target='blank'><i class="fas fa-rss-square"></i><span class="snstext" >FEEDLY</span></a> </li> |
リンク部分だけを自社のアドレスに変更する必要があります。うまく動作するかテストして確認してください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存