ワードプレスで自作テーマ作成-L22 記事下にSNSシェアボタンとフォローボタンをプラグインなしで実装する-

2020年2月24日

記事下のSNSボタン

ワードプレスで自作テーマ作成シリーズ
今回は「L22 記事下にSNSシェアボタンとフォローボタンをプラグインなしで実装する」方法をご紹介します。

上記画像のようなシェアボタンとフォローボタンを記事下に実装します。

今回実装するシェアボタン

シェアボタン

  • Twitter
  • Facebook
  • Pocket
  • Google+
  • はてなブックマーク
  • LINE

フォローボタン

  • Twitter
  • Facebook
  • Instagram
  • Feedly
  • RSS

①アイコンの追加

1. zipファイルのダウンロード

今回は寝ログさんが作成済みのWebフォントを利用させて頂きました。

こちらのブログへ行き、「icomoon.zip」ファイルをダウンロードします。

ウェブフォントのダウンロード

解凍して出来たフォルダを、FTPソフトなどを用いてテーマフォルダ直下に置きます。FTPソフトがなくてもTheme Editorでicomoonというフォルダを作成し、ファイルを1つづつアップロードすることもできます。

ファイルを1つづつアップロードするのは大変ですが必要なのは「fonts」フォルダと「style」のみですのでそれだけをアップロードすればOKです。

ウェブフォントのダウンロード

ウェブフォントのダウンロード

2. header.phpの編集

header.php」に以下を記入してください。

記入する場所は<head></head>内です。

ウェブフォントheader.phpの記載

②single.phpの編集

「single.php」に以下を記入してください。

14~18行目、★フォローする★に関しては下記5箇所をそれぞれ置き換えてから「保存」してください。

  • 自分のTwitterのURL
  • 自分のInstagramのURL
  • FacebookページのURL
  • feedlyのURL
  • RSSのURL

 

コードを記入する位置はコンテンツの下がいいでしょう。

ウェブフォントsingle.phpの記載

③style.cssの編集

「style.css」に以下を記入してください。

完成です!

\記事が役に立ったらシェアしてね/
★フォローする★

コメント

コメントを残す

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