• 解決済 tea-kay

    (@tea-kay)


    ブログのカスタマイズに挑戦しているのですが、一つ気がかりなことがあって質問します。

    「アーカイブ」ウィジェットと「カテゴリー」ウィジェットをカスタマイズしているのですが、wp_get_archives()とwp_list_categories()から出力されるHTMLの見た目が良くなくて困っています。

    具体的には、カテゴリーウィジェットの場合は

    <ul>
    	<li><a href="#">カテゴリー1</a>(0)
    </li>
    	<li><a href="#">カテゴリー2</a>(0)
    </li>
    	<li><a href="#">カテゴリー3</a>(0)
    </li>
    </ul>

    のように出力されるのを、

    <ul>
    <li><a href="#">カテゴリー1(0)</a></li>
    <li><a href="#">カテゴリー2(0)</a></li>
    <li><a href="#">カテゴリー3(0)</a></li>
    </ul>

    のように出力されるようにしたいです。

    アーカイブの場合は、

    <ul>
    	<li><a href="#">2014年4月</a>(0)
    </li>
    </ul>

    のように出力されるのを、

    <ul>
    <li><a href="#">2014年4月(0)</a></li>
    </ul>

    のように出力されるようにしたいです。

    どうかよろしくお願いします。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • こんにちは

    PHPの処理だけになりますが

    $result = wp_get_archives();
    echo preg_replace( '>\s</li>\s',"<li>\n", $result );

    wp_list_categories()もecho falseで同様に処理できると思います。

    トピック投稿者 tea-kay

    (@tea-kay)

    >nobitaさん
    ありがとうございます。
    フィルタフックを組んだら、月別アーカイブの一覧のHTMLが思い通りに出力されるようになりました。

    liタグの前のインデントが削除されませんでしたが、これはソースコードのgeneral-template.phpの

    if ('link' == $format)
    		$link_html = "\t<link rel='archives' title='" . esc_attr( $text ) . "' href='$url' />\n";
    	elseif ('option' == $format)
    		$link_html = "\t<option value='$url'>$before $text $after</option>\n";
    	elseif ('html' == $format)
    		$link_html = "\t<li>$before<a href='$url'>$text</a>$after</li>\n";
    	else // custom
    		$link_html = "\t$before<a href='$url'>$text</a>$after\n";

    を直接いじるしかないのでしょうか。

    また、wp_list_categories()ですが、元となるウィジェットでは

    <?php
    $cat_args['title_li'] = '';
    wp_list_categories( apply_filters( 'widget_categories_args', $cat_args ) );
    ?>

    と表記されていて、echo falseにする術がわかりません。こちらもよろしくお願いします。

    トピック投稿者 tea-kay

    (@tea-kay)

    また、wp_get_archives_linkで出力されるシングルクォーテーションをダブルクォーテーションに修正する方法もお願いします。

    echoの消し方は

    http://wpdocs.sourceforge.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_list_categories

    にかいてあります

    ソースコードいじっても、もう少しで3.9.1に自動アップデートされるので、元に戻りますよ。

    また、wp_get_archives_linkで出力されるシングルクォーテーションをダブルクォーテーションに修正する方法もお願いします。

    派生する質問は、新しく投稿する というルールみたいです

    トピック投稿者 tea-kay

    (@tea-kay)

    派生の質問は調べたらわかりました。今後は新しく質問するようにします。申し訳ありませんでした。

    echo falseについてもソースコードを眺めながら記述したところ、カテゴリ一覧が全て消えてしまいました。後はどのようなソースコードを組めばいいのか、そこのところがちょっとわかりません。

    最後に、ソースコードをいじっても元通りになってしまうのであれば、wp_get_archives()とwp_list_categories()から出力されるHTMLにインデントが挿入されるのは諦めるしかないのでしょうか。
    よろしくお願いします。

    トピック投稿者 tea-kay

    (@tea-kay)

    あれからいじってみましたが、walkerクラスなどを編集し直さないとならないらしく、そこまで手がまわらないので、プラグインを入れて対処することにしました。
    本当に返答頂いて非常に申し訳ありません。解決済みにして閉じます。

    トピック投稿者 tea-kay

    (@tea-kay)

    それと、問題点に気づいてもらえるようにするために、自分のサイトのリンクを投げておきます。
    http://wanderer.netgamers.jp/

    現時点でHTMLソースを見ると、アーカイブのWidgetとカテゴリーのWidgetのリンクだけにインデントが挿入されています。
    もし難しいのであれば、別の方法を探ってみます。

    それと、問題点に気づいてもらえるようにするために、自分のサイトのリンクを投げておきます。

    WordPressも、どんどんいろんなことができるようになってきていて、必ずしもWalkerを使わなければ処理できない ということもなくなってきています。

    参考のために、なんちゃってコードを書いておきます。

    <?php
    add_action('dynamic_sidebar_before', 'my_before_sidebar');
    
    function my_before_sidebar(){
    
        ob_start();
    }
    
    add_action('dynamic_sidebar_after', 'my_after_sidebar');
    
    function my_after_sidebar(){
    
        ob_end_clean();
        echo '<li>mY sideBer</li>';
    }

    私の環境だと、この処理で、サイドバーを消して mY sideBer というへんてこな文字が表示されるようになります(wp3.9以上)

    なので、コードの整形もかのうです

    (てーまで、ob_start()関数を利用するのは、推奨されていませんが)

    せっかくサイトへのリンクを公開していただいたので、その感想も書いておきます。

    htmlのインデントを気にしているようですが、むしろほかの部分が適切にインデントされていないことのほうが気になります。 これは、テーマ由来の問題が大きいので、そういう部分も意識したような公式テーマを探すことが、もっと大事ではないかと思います。

    idが重複していたりする部分もありそうですし、p要素がおかしくなっている部分もありますね。対策の優先度は、個人的には、そちらのほうが高いのではないかと思います

    入手したテーマは、たいてい「あ”-」ってところがあると思います。
    そういう部分は、作っている人に、これ「あ”-」じゃないのって教えてあげると、よいテーマを作ろうと思っている人は、「信じられないぐらい、嬉しがるものです」

    なので、制作者とコンタクトをとったほうが、いい結果を生むかもしれません。

    やり方は、一つではありません ベストプラクティスを見つけてください

    トピック投稿者 tea-kay

    (@tea-kay)

    ご指摘ありがとうございます。
    自分は今までレンタルブログ(FC2ブログ)のインデントがないHTMLを生成するCMSに慣れていて、WordPressを導入してHTMLソースを見た時にインデントだらけでショックを受けまして……。

    現在使っているのはwp memoの「WPMEMO BASIC2」ですが、インデントがあまりなくて、今まで使っていたレンタルブログと同じようなHTMLを生成できると思ってたんですが、実際使ってみると引用部分(一番最新の記事で、ゲーム内のセリフを引用しているところ)が無茶苦茶になっていました。

    普通だったら、

    これは引用です。

    となるところが、普通の段落と一緒くたになってて、それが非常に残念です。
    (Stinger3も使っていたのですが、アドセンスのところが固定されるのが厄介なので使う気になれません)

    今回の件で、自分でカスタマイズする限界を思い知らされましたので、制作者にコンタクトを取ってみます。ありがとうございました。

    トピック投稿者 tea-kay

    (@tea-kay)

    追記です。

    テーマを使っていておかしいと思ったところは、制作者の人と相談してなんとか見栄えを整える事が出来ました。
    (idの重複については、検索ボックスを統一することで解決しました)

    コード整形ですが、wp_get_archives周りはソースコードを引っ張って一部の処理を変えただけのプラグインを作るしかありませんでした。
    (フックをひとまとめにしようとしても、エラーばかりが出てうまく行きませんでした)

    一方のカテゴリー周りは、色々と調べたらwalker周りの改造のやり方がわかったので、それを追加したのですが、もう少しスマートな方法がないのかなぁと難儀しています。
    もしあればご指導願います。

    もう少しスマートな方法がないのかなぁと難儀しています。

    頑張ってください。

    ソースを見てみましたが、

    <div id="recent-posts-2" class="widget widget_recent_entries">
    <h3 class="widgettitle">最近の投稿</h3>
    <ul>
    <li><a href="http://wanderer.netgamers.jp/2014/04/29/214744/">見るのとやるのは違うのだよ <span class="post-date">(04月29日)</span></li></a>
    <li><a href="http://wanderer.netgamers.jp/2014/04/28/222431/">そしてBランク、まだプレイ時間は1時間強 <span class="post-date">(04月28日)</span></li></a>
    <li><a href="http://wanderer.netgamers.jp/2014/04/27/211511/">MGSV:GZクリア。但しC評価。 <span class="post-date">(04月27日)</span></li></a>
    <li><a href="http://wanderer.netgamers.jp/2014/04/20/063631/">まだ販売中止なのかorz <span class="post-date">(04月20日)</span></li></a>
    <li><a href="http://wanderer.netgamers.jp/2014/04/19/204618/">まだPS3版が進んでいないのに&hellip;&hellip;(汗 <span class="post-date">(04月19日)</span></li></a>
    </ul>
    </div>

    a要素の閉じタグが、閉じliの後ろに来ているので、直しておいたほうがいいと思います。

    トピック投稿者 tea-kay

    (@tea-kay)

    a要素の閉じタグが、閉じliの後ろに来ているので、直しておいたほうがいいと思います。

    こちらについては以下のとおりにして直しました。

    <?php echo $before_widget; ?>
    <?php if ( $title ) echo $before_title . $title . $after_title; ?>
    <ul>
    <?php while ( $r->have_posts() ) : $r->the_post(); ?>
    <?php if ( !$show_date ) : ?>
    <li><a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a></li>
    <?php else : ?>
    <li><a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?> <span class="post-date">(<?php echo get_the_date('m月d日'); ?>)</span></a></li>
    <?php endif; ?>
    <?php endwhile; ?>
    </ul>
    <?php echo $after_widget; ?>

    としたことで、閉じliの後ろにaが来ていたバグが治りました。お騒がせしました。

    そして現在ちょっと挑戦しているのがありまして……。

    <div id="archives-2" class="widget widget_archive">
    <h3 class="widgettitle">アーカイブ</h3>
    <ul>
    <li><a href="http://wanderer.netgamers.jp/2014/04/">2014年4月</a></li>
    <li><a href="http://wanderer.netgamers.jp/2014/03/">2014年3月</a></li>
    </ul>
    </div>

    のように出力しようとして、

    <?php
    		$archives = wp_get_archives(apply_filters('widget_archives_args', array (
    					'type'            => 'monthly',
    					'show_post_count' => $c,
    					'echo'            => 0
    				) ) );
    		$archives_array = explode("\n",$archives);
    
    		foreach( $archives_array as $archives ) {
    			echo preg_replace('/<\/a>&nbsp;(\([0-9]*\))/', ' <span class="count">$1</span></a>', ltrim($archives));
    			echo PHP_EOL;
    		}
    ?>

    と組んだのですが、

    <ul>
    <li><a href="http://wanderer.netgamers.jp/2014/04/">2014年4月</a></li>
    <li><a href="http://wanderer.netgamers.jp/2014/03/">2014年3月</a></li>
    
    </ul>

    と表示されてしまいます。
    これについては、EOLの位置をどこに持っていけばよろしいのでしょうか。
    (この書き方を見つけたおかげで、わざわざソースコードからカスタム関数を引っ張らずに済みました!)

    <ul>
    <?php
        $archives = wp_get_archives(
                        apply_filters(
                                'widget_archives_args',
                                    array(
                                        'type'            => 'monthly',
                                        'show_post_count' => $c,
                                        'echo'            => 0
                                        )
                                    )
                                );
        $archives_array = explode( PHP_EOL, $archives );
    
        foreach ( $archives_array as $archives ) {
    
            echo preg_replace( '/<\/a> (\([0-9]*\))/', ' <span class="count">$1</span></a>', ltrim( $archives ) );
    
            if ( $archives !== end( $archives_array ) ) {
    
                echo PHP_EOL;
            }
        }
    ?></ul>
    トピック投稿者 tea-kay

    (@tea-kay)

    上のソースコードを貼り付けたら、見事に思い通りの表記になりました。
    ありがとうございました!

    コメントフォームのHTMLのインデントが気になってしまいますが、これはどのように対処したらよろしいでしょうか。それとも割りきってしまうべきなのでしょうか。
    (もし、それについて別トピックで解決する必要があれば、そちらに移動します)

    よろしくお願いします。

    最近のWordPressは、コメントフォーム等の出力形式を xhtml,html5の2種類の出力形式をサポートしています。

    詳細は、

    セマンテック マークアップ

    を参照してください。

    なので、

    コメントフォームのHTMLのインデントが気になってしまいますが、これはどのように対処したらよろしいでしょうか。それとも割りきってしまうべきなのでしょうか。

    もう少し具体的に書いていただいたほうがいいと思います

    別トピックで解決する必要があれば、そちらに移動します

    かならず回答が付くかどうかは約束できませんが、別トピックを立てていただいたほうが回答が付きやすいかもしれないとは思いますが、
    プライベート配布されているテーマの場合、まずはテーマ配布元に照会してみてはどうでしょうか?

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック「空白を削除したいのですが……」には新たに返信することはできません。