menu

【動画版】子テーマでのバイラルメディア風facebookボタン設置方法

この記事が気に入ったらいいね!しようというバイラルメディア風オリジナルSNSボタンの設置方法について、動画で解説しました。
前回は、プラグインを使って設置した のですが、簡単に設置できてよかったのですが、固定ページにも反映されたので、記事のみにバイラルメディア風facebookボタンを設置したく、子テーマを使い設置しました。
その時の様子を動画にして解説しましたので、参考にしていただけたらと思います。
また、設置するにあたり、ままはっく の記事からコードを使わせていただきました。まなしばさんありがとうございました。

バイラルメディア風facebookいいねボタン

スクリーンショット 2016-04-29 4.06.31
今回設置するバイラルメディア風facebookいいねボタンはこのような画像になります。このような画像を設置することで、facebookのいいねを押してもらいやすくなり、いいねを押してもらった人にfacebookを通じて記事を更新した時にお知らせすることができ、継続的にブログを見てもらうことができます。

こんな人にはおすすめ

  • 初めてwordpressをカスタマイズする人
  • CSS以外のコードを編集することが初めての人
  • カスタマイズの手順がわからない人

子テーマを使う理由

今回は子テーマを使いカスタマイズしました。子テーマとは何かわからない人はまず↓をご覧下さい。

通常テーマを直接、コードを書き換えてカスタマイズすると、テーマをアップデートした時に、カスタマイズした内容がアップデート後に戻ります。
しかし、子テーマを使うと、テーマをアップデートした時に、カスタマイズした内容が継続して受け継がれますので、安心してカスタマイズできます。

 

もっと詳しく子テーマを使う理由について知りたい方は↓を参照して下さい。
WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など

バイラルメディア風facebookいいねボタンの設置方法

バイラルメディア風facebookいいねボタンの設置方法について動画で解説しています。

クリックすると見れます↓
After EffectsでCMのグラブル風オープニングを作ってみよう。
ままはっくの記事について↓に貼ってますので、コードを使われる良いと思います。
FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

カスタマイズする時につまづいた点

  • style.cssのスペル間違い
  • single.phpにコードをペーストする位置
  • functions.phpのコードミス

 style.cssを間違えると管理画面でエラーですよ。と現れるので、もう一度スペルの確認をした方が良いです。私は3回ほどエラーになりました。

 single.phpのペースト位置ですが、私はphpに関する知識はないですが、なんとなくこの辺にコードをペーストしたらいいかなという感じで取り組んでいたら、記事の上に貼り付けられたり、最下部に貼り付けられたりしました。その都度、変更してアップロードするっていう感じ何回もペーストすると、自分の位置に収まると思いますので、一度で諦めず、何度か試してみて下さい。

 functions.phpのコードを間違えると、画面が真っ白になります。しかし、FTPソフトで削除すると元に戻りますので、慌てずに冷静に対応すれば良いと思います。あと、万が一のためにバックアップを取ってカスタマイズされた方が良いと思います。

 

まとめ

いかがでしたでしょうか?wordpressのカスタマイズが初めての方はどのようにするか手順がつかめていただけたのではないかなと思います。私自身も初めてでしたので、ミスしながら、スペルの訂正やペーストの位置を変えたりして試しました。参考にしていただき、カスタマイズの一助になれば幸いです。

設置したバイラルメディア風facebookボタンに動きをつけたい方はこちら をご覧ください。

プラグインで簡単にバイラルメディア風facebookボタンを設置する方法

プラグインで簡単に設置する方法について知りたい方はご覧下さい。

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

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

スポンサーリンク

おすすめ穴場レジャー!西海市の大島トマト狩りで楽しみ美味しくいただけるよ。

誰でもできる!jQueryを使ってwordpressでもスクロール時に画像をふわっとフェードインさせる方法

関連記事

  1. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  2. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

  3. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

  4. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  5. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  6. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

  7. wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  8. 本気でスキルを身に付けたい人におすすめのプログラミングスクール5…

    本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みた…

PAGE TOP