WordPress ツール・ソフトウェア

WordPress のテーマを自分で作ってみる(14) -コメントをRSSで購読するためのリンクを作る

2010年1月25日

コメント欄に投稿されるコメントを、ユーザーがRSSリーダーで確認できるように、以下の様なリンクを作ってみました。

image
(「コメントの投稿」ボタンの下にある横長のボックス部分です)

1) RSSの適当なアイコンを用意します。今回は、ICON FINDER さんのサイトから拾ってきました。
テーマを収納するフォルダーが" test1" であれば、test1\images\rss.png として保存します。

2) コメント欄を表示する comments.php 内に以下のコードを配置します。

<p class="postmetadata">
コメントを RSS 2.0で購読<span class="rssimg"><a href='<?php echo  get_post_comments_feed_link(); ?>'><img src="<?php bloginfo('template_directory'); ?>/images/rss.png" alt="RSS2.0" ></span></a>
</p> <!-- postmetadata -->

前後の "postmetadata" は、外周の四角形のデザインです。
このコードのキモは、

echo   get_post_comments_feed_link()

の部分です。
get_post_comments_feed_link() が、コメントのRSSリンクを返す WordPress の関数で、それを echo で出力します。
はじめ管理人は、echo の必要性に気づいておらず、コードが上手く動かず苦労しました。

3) 2)で書いたコードのスタイルを定義します。

css ファイルに、2) で使用したクラスを定義します。

ここでは、使用している css ファイルに以下の様なものを加えました。

試行錯誤の我流なので、無駄の多い変な指定だと思いますが、IE7 と Firefox 3.5 ではそこそこ良さそうなレイアウトになりました。勉強が追いつかないので、今は、これで我慢。。

.postmetadata {
padding: 5px 10px 5px 10px;
border: solid 1px #cccccc;
font-family: "Arial", "MS Pゴシック", "Osaka-等幅", sans-serif;
background-image: url(../images/back1.jpg); /* 背景用のグラデェーションをかけたイメージ */
background-repeat: repeat-x;
}

.rssimg a img {
vertical-align:middle;
padding-bottom: 2px;
padding-left: 4px;
border: none;
}

"img" タグのスタイル指定部分 ".rssimg a img" は、挿入した RSSのアイコンが文章と同じラインに綺麗にレイアウトされないため作成しました。
postmetadata の指定は、外枠の四角の部分です。背景には、h34_back1 なファイルを x軸方向に repeat して、僅かにグラデェーションを付けています。(画像のサイズが縦長なのは、他のもっと縦幅の大きいBOX 部分でも流用しているためで、深い意味はありません)

-WordPress, ツール・ソフトウェア

Copyright© エンジニアの何でもメモ帳 , 2020 All Rights Reserved.