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

関連記事

Wordpress1

WordPressでカテゴリーごとにデザインを変更する方法【Stingerカスタマイズ】

表題についてお問い合わせを頂きましたので、ブログにてご返答させて頂こうと思います。 今回は、エント

記事を読む

twitter1

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

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

記事を読む

3column-i

Stingerを3カラムにしてみたよ!「DeepJaggy-threeColumn」リリース!【Stingerカスタマイズ】

表題のとおりです!3カラム需要あるかなぁどうかなぁと思いましたが、作りましたので良かったら使ってくだ

記事を読む

youtube

埋め込んだYouTubeなどの動画をスマホ用にCSSで最適化する方法

ブログに紹介したい動画を貼り付けて載せる場合には、埋め込みコードを使ってブログにコピペしますよね?

記事を読む

ohajiki

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

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

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2017年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑