ブログの記事下に自分のプロフィールと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

関連記事

jQuery

記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

外部リンク(他のサイト)は別窓(新しいタブで表示)。そして、外部リンクですよ!というのをアイコンをつ

記事を読む

piyo

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

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

記事を読む

top_niji

ブログのデザインを変更しました!そのとき考えたこと思ったこと

実は元のデザインを最新のStingerのバージョンに対応しようと思っていたのですが、なんだか新しいの

記事を読む

mac

WordPressの自動挿入されるpタグを削除する方法

WordPressにはpタグを自動挿入してくれる機能(auto paragraph)というものがあり

記事を読む

Stinger-minimum

子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2018年4月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30  
電子書籍ストア BookLive!
PAGE TOP ↑