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をフォローしよう!

スクリーンショット2016-05-0123.35.55福岡で特別な食事をするならイタリアンなかがわがおすすめ!

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

関連記事

  1. データベース復元

    【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

  2. Fotolia_51516768_S

    WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

  3. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

    たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  4. facebook投稿のリンク画面をアイキャッチ画像にする設定方法

    facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  5. wordpressのドメインを変更しGoogleに通知する方法

    wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

  6. 40762277_m

    誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

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

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

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

  8. お名前.comから独自ドメインを取得してwordpressをインストールする方法(さくらインターネット)

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

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

PAGE TOP