2019年3月12日 / 最終更新日時 : 2019年3月24日くまはちLAB HTML

WordPress無料テーマ Stinger8で投稿者名を消してソーシャルアイコンを手直し

この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

WordPress[/simple_tooltip]のテーマを変更した時にはじめに確認して修正したい部分は、投稿者名の表示に関する部分です。
このStinger8 でも投稿と固定ページで表示されているので最初に消しておきたいところですね。
また、ソーシャルアイコンで既に使わないものがそのまま表示されていたりアイコンが表示できなくなっているのでまずその部分を修正します。

目　次

カスタマイズには子テーマの使用が必須？
投稿者名を消す方法
なぜ、ソーシャルボタンのアイコンが表示されないのか？
表示されるためには？
使わないソーシャルアイコンとは？
feedlyを追加するには？

カスタマイズには子テーマの使用が必須？

[simple_tooltip content='WordPressのテーマとは、Webサイト全体のテンプレートのことです。テーマは複数のファイルの集合体で、デザインなどの内容が一式セットになっています。そのため、テーマを変更すれば複雑な処理を行うことなく、Webサイトのデザインや構成、機能などを変えることができます。']テーマ[/simple_tooltip]をカスタマイズしたり修正をしたりする場合は、Stinger8 に限らず子テーマを使うということをオススメします。
投稿者名を消すということとソーシャルアイコンの手直しをするということについては、 PHPのファイルをカスタマイズする必要があります。
親テーマをそのまま残しておく方が何かあったときに対処できたりすることも多いということと最初からダウンロードできるようになっているので使ってください。

今回のカスタマイズでは下記のファイルを親テーマから子テーマにコピペしてアップロードしておきます。アップロードは、FTPソフトでアップロードしてください。
[blogcard url="https://buff.ly/2QND9uZ"]

header.php
page.php
single.php
sns.php
sns-top.php

投稿者名を消す方法

投稿者名が表示されると[simple_tooltip content='WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システムとしてもしばしば利用されている。']WordPress[/simple_tooltip]のIDがわかってしまいます。総当り攻撃などを受けないためにも表示させないようにしておきたいところです。また、画像にも記載していますが、Edit Author Slug を使ったとしても[simple_tooltip content='WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システムとしてもしばしば利用されている。']WordPress[/simple_tooltip]のIDがオーナーリンクに反映されてしまいます。表示させないことが安全です。

上記は、single.phpになりますが、110行目の選択部分を削除します。削除後に1行スペースを詰めます。
また、page.phpの76行目を削除します。

				<p>執筆者：<?php the_author_posts_link(); ?></p>

1	<p>執筆者：<?php the_author_posts_link(); ?></p>

削除後は、上書き保存しておきます。Windowsの場合は、文字コードがUTF-8になっていることをちゃんと確認しておいてください。

なぜ、ソーシャルボタンのアイコンが表示されないのか？

Stinger8 をインストールしたらこのような表示になっていました。画像にあるようにGoogle+は、既に投稿もできずに消えるのを待つだけなのでボタンの必要がありません。また、ほかのアイコンも表示されておりません。
これは、以前書いたLightning での記事と同じ理由でした。中にはそのまま表示されている方もいるはずです。
[blogcard url="https://buff.ly/2WAupaD"]

要は、読み込んだスタイルシートと表示部分のスタイルシートの記述方法があってないということです。
Awesome Font Icon を使用しているのですが、そのバージョンによって記述方法が違うのでその部分を修正しないと表示できないということです。それは、インストールされているプラグインの影響もあるので今は、以前のバージョン4.7の記述方法よりはバージョン5系の記述方法を使う必要があるのです。

表示されるためには？

はてブ以外のアイコンを表示させるためには、Awesome Font Icon の記述をバージョン5系の記述に変更する必要があります。画像で選択されている部分は、バージョン4.7の記述方法になっているためこれを書き換えします。

	<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>

<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;">" >Twitter

<?php

if(function_exists('get_scc_twitter')) {

if( scc_get_share_twitter( array( 'post_id' => 'home' ) ) !== 0){

echo ''.scc_get_share_twitter( array( 'post_id' => 'home' ) ).'';

}else{

echo 'Twitter';

}

}?></a>

</li>

<a target="_blank" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>">" >Facebook

<?php

if(function_exists('get_scc_facebook')) {

if( scc_get_share_facebook( array( 'post_id' => 'home' ) ) !== 0){

echo ''.scc_get_share_facebook( array( 'post_id' => 'home' ) ).'';

}else{

echo 'Facebook';

}

}?></a>

</li>

<a onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;" >" >Pocket

<?php

if(function_exists('get_scc_pocket')) {

if( scc_get_share_pocket( array( 'post_id' => 'home' ) ) !== 0){

echo ''.scc_get_share_pocket( array( 'post_id' => 'home' ) ).'';

}else{

echo 'Pocket';

}

}?></a></li>

<a href="//b.hatena.ne.jp/entry/<?php home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php bloginfo('name'); ?>">B!" >はてブ

<?php if(function_exists('get_scc_hatebu')) {

if( scc_get_share_hatebu( array( 'post_id' => 'home' ) ) !== 0){

echo ''.scc_get_share_hatebu( array( 'post_id' => 'home' ) ).'';

}else{

echo 'はてブ';

}

}?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li>

</li>

<a href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Fsocial908.com%2Fnormal%2Ffeed%2F' target='blank'>FEEDLY</a>

</li>

</ul>

上記のソースをsns.phpとsns-top.phpで書き換えます。ただ、feedlyについては、後で自分のアドレスに変更する必要があります。そのまま使うと当サイトのテストサイトのフィードが購読されてしまいます。

使わないソーシャルアイコンとは？

先述にもあるようにGoogle+は、廃止されるのでもう投稿ができません。4月でしたか完全に消えるとのことでソーシャルボタンは、必要なくなりました。通常ですとアップデートなどで変更される部分なのですが、Stinger8 ではアップデートがないので自分で修正するしかないということです。前の項目で表示しているソースでGoogle+は、削除されています。代りにfeedlyを追加して3X2でバランスよくしています。

feedlyを追加するには？

カスタマイズソースでは、feedly を追加しています。feedly のボタンを追加する方法を解説します。これは、フェレットさんのサイトで紹介されていた方法を参考にしています。
[blogcard url="https://ferret-plus.com/5902"]

https://www.feedly.com/factory.html
上記のサイトでリンクを作成します。

最初にボタンを選ぶのですが、ボタンは無視してOKです。初期のスタイルと合わせるためにボタンは、使用しません。

feedのURLを入力します。
[simple_tooltip content='WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システムとしてもしばしば利用されている。']WordPress[/simple_tooltip]の場合は、カスタマイズなどしていない場合は、下記の通りです。
http://あなたのドメイン/feed/

上記で生成されたコードを一部で使ってカスタマイズします。これは、元々のStinger8 スタイルに合わせるためのカスタマイズが必要だからです。
というわけで最初のリンク部分だけをコピペします。

		<!--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>