制作物全国対応・兵庫県 姫路市にある発信力をテーマとしたホームページ・ブログ制作
ニコ株式会社
Blog


ワードプレスにアメブロのようなメッセージボードを付ける方法


色々と貪っていましたら発見しましたので自分用に記録。

操作方法は後に書きますが、イメージとしてはウィジェット欄にテキストとして書き込みができ、
そのウィジェットをブログ内に表示。

アメブロのメッセージボードはトップページにのみ表示されるものなので、
ウィジェットのテキスト部分をトップページの記事タイトルの上に表示させるようにしたい。

たいていウィジェット欄は左サイド、右サイド、ヘッダー部、フッター部に表示させるものがありますが、
求めているものがなかったので、ウィジェットそのものを追加してしまおうと考えました。

 

触るファイルは”functions.php”というファイル。

 

場所は「外観」→「テーマ編集」→「テーマのための関数(functions.php)」

 

ここにウィジェットの情報が書かれてありますので、
ウィジェットを追加します。

 

register_sidebar(array(
'name' => 'お知らせ欄',
'before_widget' => '<div id="massage_bord"><div id="%1$s" class="widget %2$s">',
'after_widget' => '</div></div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

一番最後の”?>”の前に追加します。

2行めの「お知らせ欄」がウィジェットの名前になります。

上記を追加したら、実際にウィジェットが追加されたか確認します。

 

確認方法は「外観」→「ウィジェット」

 

上記画像のように「お知らせ欄」というウィジェットが追加されているはずです。

そのウィジェットの中に「テキスト」を追加します。

テキストを「お知らせ欄」ウィジェットにドラッグします。
するとウィジェット内にテキスト ウィジェットが追加されます。

このテキストはhtmlが利用できますので、文字の装飾、画像の添付、リンク貼付けも可能になります。

 

ここまでがウィジェットの設定です。

 

ここから設定したウィジェットを実際にブログに表示させる作業となります。

私が行ったのはトップページのみに表示させるというものです。

触るファイルは”index.php”です。

 

挿入するタグは下記になります。

 

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘お知らせ欄’) ) : ?>
<?php endif; ?>

追加する場所なのですが、これは利用されているテーマによって微妙に異なりますので、一概に「ここです!」と言えないのが正直なところなのです。

ソースを見てそれっぽいところに突っ込んで確認しながら位置調整をしてください という感じだったります。

 

”<?php endif; ?>” というタグがindex.php内にふたつあったりするのですが、
ひとつめのすぐ上に追加とか、そういう曖昧なことしか言えませんです。

申し訳ないっす。

 

”content”とか”post”とかがブログの記事部分になる場合がほとんどだと思うので、
その付近で試してみてください。

※挿入場所のご質問にはお応えできません。予めご了承ください。 

 



井上 大輔

この記事を書いたひと

ニコ株式会社の社長。html、cssのコーディングの基礎を独学で学び、引きこもってゴソゴソとコーディングをするのが趣味。 建物を見るとhtmlとcssが浮かぶほど。 webの力に惹かれ、今日もせっせとコーディングを行っています。 好きなことはいたずら。子供の頃の夢は社長。 ゲーム好きでテイルズシリーズ、龍が如くシリーズの話題は大好き。 圧倒的にドSですが、妻に怯えながらスマホのゲームに課金をしています。


カテゴリー: PC、WEB小ネタ   タグ: , , ,   この投稿のパーマリンク

コメントは受け付けていません。

関連記事


カテゴリー:PC、WEB小ネタ

ニコ株式会社 公式コラム

お知らせ

コラム新着情報

公式フェイスブックページ


Copyright ©ニコ株式会社 All Rights Reserved.