WordPressでTOPページ(index.php)にお知らせを表示する

この記事が良ければ、ぜひシェアお願いします

普通にブログを運営していると、特にお知らせしたい記事があったとしても、流れて行ってしまうので知ってもらうことができなかったりしますよね。そんな場合には、index.phpなどのテンプレートファイルにお知らせ用の領域を作ってしまうのがオススメです。ということで、当サイトにも『お知らせ』を作りましたので、エントリさせて頂きます!

静的に『お知らせ』を記述する

当サイトのTOPページでも表示していますが、単純にリスト形式でお知らせを枠で囲んだものを表示させる方法です。

こんな感じです。

TOPページにだけ表示したいのであれば、index.php(またはhome.php)、各記事やページにも表示させたいのであれば、single.phpやpage.phpに記述してください。参考にCSSも記載しておきます。

<!-- お知らせ -->
<div class="index-info">
<p>【お知らせ】</p>
<ul>
<li><a href="http://blog.info-architecture.jp/wordpress/theme-customize/simplefeatures-beta.html">WordPressオリジナルテーマ『SimpleFeatures』β版公開 (2012/02/05投稿)</a></li>
<li>ほげほげ</li>
<li>ほげほげ</li>
</ul>
</div>
<!-- お知らせ -->

CSSはこんな風にしてみました。

.index-info {
    border-top: 1px solid #ff6347;
    border-bottom: 1px solid #ff6347;
    padding: 5px 0 5px 5px;
    margin: 5px 0 15px 0;
    background-color: #ffc0cb;
}

.index-info ul {
    list-style-type: disc;
    line-height: 0;
    padding-left: 15px;
}

.index-info p{
	margin: 0 0 5px;
}

.index-info li {
    font-size: 12px;
    padding: 1px 0 1px 0;
    margin: 0 0 5px 0;
}

特定のカテゴリーの記事リンクを抽出して表示する

ただ、上記の方法だと手作業でお知らせを作らないといけないので、ちょっと面倒と言えば面倒ですよね。ということで、例えば「お知らせ」カテゴリー(スラッグは”info”)にお知らせ記事を投稿して、自働で出力させるというのも便利だと思います。(ソースを書くとなぜか画面崩れしてしまうので、省略させてもらいます。)

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク