vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

[Stinger5] 固定ページにSNSシェアボタンを追加する

      2017/01/31

LINEで送る
Pocket

こんにちは、okutani(@okutani_t)です。私はWordPressテーマにStinger5を使っています。Stinger5を使うだけで、検索にヒットしやすくなる魔法のようなテーマだと私は思っています。

そんなStinger5では、そのままだと固定ページにSNSシェアボタンがありません。今回、固定ページでもSNSシェアボタンを利用できるように設定しました。

ちなみにたった1行追加するだけなので作業自体は簡単ですが、内部ファイルを弄るので気をつけて作業しましょう。

スポンサーリンク

SNSシェアボタンの設置

では、実際に作業していきましょう。

固定ページはpage.phpで作られています。なので、このpage.phpにシェアボタンのコードを貼り付けてあげればOKですね。

もし子テーマを使っている方は、親テーマからpage.phpをコピーして子テーマ内で編集しましょう。page.phpはこの位置にあります。

(WordPressをインストールした場所)/wp-content/themes/stinger5親テーマor子テーマ

では、page.phpの好きな場所に下記コードを記述しましょう。

<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>

場所は本文下あたりが良いのではないでしょうか。本文が<?php the_content(); //本文 ?>にあたるので、その下に記述すればOKですね。

確認

きちんとSNSシェアボタンが設置されているか確認してみます。

stinger5-page-sns

このようにSNSシェアボタンが設置されていれば成功です。

ちなみに、私はsns.phpに他のSNSボタンを追加しているので、みなさんよりボタンの数が多いかと思います。もしボタンを追加してみたい方は下記記事を参考に追加してみてはどうでしょう。

Pocketボタンをサイトに設置してみよう!Stinger5編
こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェアボタンにPocketを追...
2015-05-17 22:19
はてブ

見た目はstyle.cssである程度変更しています。こちらは記事にしていないので、もし要望があれば書こうかと思っています。

SNSボタン追加方法の説明は以上です。お役に立てれば幸いです。

まとめ

Stinger5の固定ページにSNSボタンを追加するのは、たった1行で簡単に設置できました。

ちなみに当ブログではAboutを固定ページで作成しているので、参考にしてみてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
.phpファイルやプログラムコードが出てきて初心者の方は分かりにくいかと思いますが、ゆっくり自分のペースで進めてみるのが良いですね。

 - Stinger5

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

こんにちは、okutani(@okutani_t)です。Stinger5のスマー …

[Stinger5] デフォルトのツイートボタンからブログ名を含めて投稿する

こんにちは、okutani(@okutani_t)です。Stinger5では初め …

Stinger5の導入&子テーマの作成方法

こんにちは、okutani(@okutani_t)です。WordPressはブロ …

Pocketボタンをサイトに設置してみよう!Stinger5編

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェ …

[Stinger5] スマホのブログタイトルを画像に変更する

こんにちは、okutani(@okutani_t)です。WordPressのテー …

Stinger5にファビコンを設置する方法

こんにちは、okutani(@okutani_t)です。本記事ではWordPre …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

Simplicity,Stinger5で超簡単にアイコンを使う方法

こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。 …

[Stinger5] 関連記事の見出しを任意の文字に変更する

こんにちは、okutani(@okutani_t)です。 このサイトはWordP …

Stinger5で文字色が変更できない!テーマカスタマイザーの削除で解決しました

こんにちは、okutani(@okutani_t)です。先日、Stinger5で …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。