質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

5165閲覧

wp_get_archives()で出力されるHTMLのカスタマイズ方法

aKusano

総合スコア3763

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2015/11/13 13:29

WordPress初心者です。
初歩的な質問で大変恐縮なのですが、「月間アーカイブ一覧」を表示させるためにwp_get_archives()を使おうと思ったのですが、
その際出力されるHTMLのフォーマットを

<li><a href="xxxx" class="yyyy">zzzzzzz</a></li>

のような感じで、出力されるaタグに任意のclassをつけることは可能でしょうか?
可能であればカスタマイズ方法を教えていただけますと助かります。

・aタグに任意のclassをつける
・liタグに任意のclassをつける
・aタグの内側にspanタグを追加する
・liの開始タグ直後に<i></i>タグを挿入する

などといった感じでデザイン再現のためにいろいろHTML構造を変更したいケースはあると思うのですが、そういう時はどうすればよいのでしょうか?

よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

wp-include/general-template.php に wp_get_archives() が定義されていますね。
ここをいじればいいと思いますよ。

投稿2015/11/13 13:45

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2015/11/13 13:50

ご回答ありがとうございます。 実はこちらのブログ↓を参考にwp_get_archives()の定義をいじってみたのですが、エラーが出まくったあげくに文字化けしてしまいまして、「functions.phpコワイ!」となってしまったので、もしや他に何か良い方法があるのでは?と思って質問してみた次第です。 http://kotori-blog.com/wordpress/wp_get_archives/ やはりwp_get_archives()の関数定義そのものを変更しないと無理でしょうか?
退会済みユーザー

退会済みユーザー

2015/11/13 13:58 編集

ここ以外に関数を定義している部分がないので、それしかないでしょうね。 そもそも、何かやりたいことはclassをつけることではないと思いますが、 何のためにclassをつけなきゃいけないのでしょう。 そもそもclassをつけなきゃ実現できないのか?の判断が間違っていませんか? デザインのためにHTMLの構造を変えるというのはWordpressを使っていて起こりえませんよ。通常は。
aKusano

2015/11/13 14:08

もう一度functions.phpを見なおしてみました。 なんと、1行目に<?php がありませんでした………! ものすごい初歩的なミス……… wp_get_archives()をfunctions.phpにコピーして関数定義変更したら aタグにclassをつけることができました! ありがとうございました。
aKusano

2015/11/13 14:14

>デザインのためにHTMLの構造を変えるというのはWordpressを使っていて起こりえません アイコン付きのリストのデザインの実装方法はいろいろありますので、 WordPress側の機能でどのようなHTML構造を吐いてくるのか分かっていれば 最初からclass等をつけずにマークアップすることもできますが、 そうでない場合今回のようにclass付きでマークアップされてきたりすることもあり得ます。 また、実現したいデザインがかなり凝ったものだった場合、ノーマルなul>li>aの構造では実現不可な場合もあり得ます。 なので、どうしてもカスタマイズが必要だった場合にどうするのか、ということが知りたかったのです。
退会済みユーザー

退会済みユーザー

2015/11/13 14:34

ちなみにどんな場合なのでしょうか? 具体的にどんなときにclassを付与する必要があるのか、思い描けないので教えていただけませんか?
aKusano

2015/11/13 14:56

例えばicoMoonなどのアイコンフォントサイトなどを利用する場合、通常はアイコンを表示したい要素に指定のclassを付与することでアイコン表示する仕様になっています。 今回もアイコンフォントを表示させるためにリスト内にclassを付与していました。 まぁ、CSS側で個別要素にclassをつけなくても良いようにカスタマイズすることもできますので、WordPress側で対応できないのであればこの場合はCSS側を変更することでも対応はできます。 ただ、ご存知のようにCSSは何かしらのHTML要素が存在しなければスタイル適用できませんので、ul、li、aの3つの要素をフルに使ってもまだ足りないような複雑なデザインを実装するには何らかの要素を足す必要も出てきます。 そんな複雑なデザインにすることはめったに無いでしょうが、可能性はゼロではないので、「デザイン実現のためにHTMLの構造を変える」という事態はあり得ると思います。 デザイナーさんやコーダーさんが必ずしもWordPressでどんなHTML構造が出力されるかについて精通しているとは限りませんので。。。
aKusano

2015/11/13 15:01

あと今回のケースとは違いますが、「アーカイブ一覧リストの中で現在位置表示のために特定のリストアイテムだけスタイルを変更したい」といったケースも考えられますね。。。
退会済みユーザー

退会済みユーザー

2015/11/13 15:19 編集

返信ありがとうございます。 なるほど、webフォンとのライブラリを使いたいというような場合ですか。確かにそのようなときには、特定のクラス名をつけたくなりますね。 先ほど、公式リファレンスを眺めてみたんですが、 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_get_archives によると、before というオプションがありますから、ここに、 <?php wp_get_archives( array( 'type' => 'monthly', 'before' => '<span class="icon icon-font"></span>' ) ); ?> こんな感じで、設定可能のようですね。 手元のWordpressで試してみましたが、wp_get_archivesを利用しているテンプレートにオプションを追記するだけのようです。 wordpress のコアな関数に手を入れるのは…個人的には最後の手段にしたいところだなあ…。アップデートしにくくなるし…
aKusano

2015/11/13 15:52

beforeオプションですか! なるほど、spanとかiとかを差し込むならこの方がよさそうですね。大変参考になります。 >wordpress のコアな関数に手を入れるのは…個人的には最後の手段にしたいところだなあ…。アップデートしにくくなるし… そうですね。今回参考にしたサイトの方も、コアの関数を複製して別名の関数にしていました。
退会済みユーザー

退会済みユーザー

2015/11/13 15:54

やっぱりそうですよねー。 リファレンス読まない人はブログ書いちゃいかんよな… バッドノウハウばかり蔓延している気がします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問