web-dev-qa-db-ja.com

リストの各カテゴリにスタイルを適用する方法

投稿の本文内にカテゴリのリストを表示するための簡単なプラグインを作成する必要があります。コーディングに慣れていないので、基本を探して少し変更を加えました。今ではこんな感じです

// [cats]
function catting ( $atts, $content = null ) {
global $post;
$categories = get_the_category_list(  ', ', '', $post->ID  );
 return '<div id="cats" class="catting">' . $categories . '</div>';
}
add_shortcode("cats", "catting");

それは単純にリストされた投稿のカテゴリーを示しています、そして私はそれをボタンとして表示するためにそれにカスタムスタイルを適用することに成功しました、しかしスタイルはカテゴリーに別々にそして個々に影響を及ぼす代わりに全体としてショートコードに適用されます。

私はforeachを使用して、それらの間の空白にカンマを変更しようとしています、しかし、私が何かを試みる度に、それはコードを壊すか、あるいは何も変更しません。

それぞれのカテゴリーに別々にスタイルを適用する方法を知りたいのですが、どうもありがとうございました。

pluginscategoriescustomizationshortcodetaxonomy
1
JorgeAmVF

@Usceで提案されているようにwp_list_categories()関数参照を反映するようにあなたのコードを修正しました。

このスニペットは順不同のリストを作成し、 "Categories"リストのタイトルを削除し、個々のカテゴリIDを持つliクラスを追加するので、リスト内の各リンクをターゲットにすることができます。

function catting ($atts, $content = null) { echo '<div id="cats" class="catting">' . wp_list_categories('title_li=','current_category') . '</div>'; } add_shortcode("cats", "catting");

ここでは、箇条書きと余白を削除するためのCSSをいくつか示しています。これにより、元のコードとまったく同じように動作しますが、liはアンカーをラップします。

CSSは作成したリストを横一列に分割します。結果をさらにカスタマイズするためにCSSを変更すること、つまりボタンのスタイルを追加することを忘れないでください。

#cats.catting ul { display: inline; } #cats.catting ul li.cat-item { list-style: none; margin: 0px 10px; }

これであなたの質問に答えられると思います。

0
Jarmerson

あなたはそのためのプラグインを書く必要はありません - あなたが既に必要としているものは存在します。このリンクを確認してください。 https://wordpress.org/plugins/list-categories/ このプラグインを使用すると、投稿やページにカテゴリを表示できます。もちろん、あなた自身のプラグインを書きたいと思うかもしれません、そしてその場合このリンクは役に立ちます。これがプロセスのスピードアップに役立つことを願っています。

0
Alex Black