ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

カテゴリー:WordPress    |    タグ:

ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

このブログの記事したにある購読スペース(RSS登録とかTwitter、Facebook、Google+などのフォローをボタンを設置)というのいいなぁと言って頂いたのですこしアレンジをしたバージョンをカスタマイズ記事としてここに残しておこうと思います。

実装したいカスタマイズ

Stinger Advent Calendar 2013 17日目担当のなべこう(@fukujion)さんのこの記事がきっかけ。

こちらで、実際にやってみたいというカスタマイズが3点ほど

  • 記事下の購読スペース
  • 文字装飾CSS
  • 記事の最後に画像と吹き出し

自分のプロフィールとRSS購読ボタンを設置する

この中の記事下の購読スペースと、記事の最後に画像と吹き出しを合わせて図のような感じにしてみました。

出来上がりの図

出来上がりの図

実際の出来上がりは下のリンクからご覧ください

サンプルをみる

実装

場所は、お好きなところへ。
以下の内容をテンプレートへ記述します。

フィードのURLFeedlyのURLはここでは割愛しますが、
それぞれご自身のものに置き換えてください。
画像はStingerならimagesフォルダ(テーマ内の)に入れてください。


次にCSSで装飾をします。

と、これでPC版の方は出来上がりです!
プロフィール欄のところはお好きな言葉などに書き換えてください。

モバイル版実装

モバイルの方は、実はこのブログでは表示させないようにしています。
ここでは、モバイルでは表示させない方法

wp_is_mobile関数

WordPress3.4からこの関数を使ってモバイルとPCを振り分けることができるようになりました。

ですが、この関数はiPadをモバイルとして扱ってしまいます。
iPadをPCとして認識させるための関数をfunctions.phpへ書きます。

これで、iPadをPCとして認識させることができたので、次にテンプレートには以下のように書きます。

これで完成です!

最後、すこし駆け足できてしまいました。
とっても長くなってしまったので、あとの残りの文字装飾CSSと吹き出しは、また次回に書きたいと思います。

少しでも参考になれば幸いです。


※ 追記
吹き出しの記事を書きました。

こちらカスタムフィールドを使って記事下にまとめや今日の一言などいろいろと表示させてみよう!

よろしければこちらも合わせてお読みください。

ADVERTISEMENT

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

published:2013/12/18    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

piyo

子テーマ「Stinger-minimum」の全貌を備忘録+CSS3のtext-shadow

子テーマ「Stinger-minimum」をリリースしてから早いくとせ。。経ちました最近ブログにお問

記事を読む

jet

バージョンアップしたJetpackがマークダウン対応されたので使ってみた

待ちに待っていた! Jetpackバージョンアップ(バージョン 2.8)でMarkdownが新しく

記事を読む

twitter1

【WordPress】TwitterCards(ツイッターカード)に対応する方法

先日、Twitterを始めたので、TwitterCards(ツイッターカード)にも対応。ということで

記事を読む

image

少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!

この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年10月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
電子書籍ストア BookLive!
PAGE TOP ↑