web-dev-qa-db-ja.com

カスタム投稿タイプのインデックスページに32 x 32のアイコンを追加する

私は「アルバム」カスタム投稿タイプを設定し、赤い丸があるインデックスページにアイコンを追加したいと思います（下の画像を参照してください。

これがアイコンを置き換える私の機能です。 CSSは、firebugでicon要素を調べたときに見つけたものです。

add_action('admin_head', 'album_foo');
function album_foo() {
        global $post_type;
    ?>
    <style>
    <?php if ($post_type == 'album') : ?>

     #icon-album.icon32.icon32-posts-album {
      background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
    } 
    <?php endif; ?>
        </style>
        <?php
}

私はまた、機能のこのCSSを試してみました：

#icon-edit.icon32-posts-album {
        background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
}

私のCSSが欠けているものを理解することはできませんが、私のアイコンは表示されていません。

enter image description here

custom-post-typesicon
2
chowwy

私はそれを考え出した！

WordPressがカスタム投稿インデックス/編集/追加ページで32 x 32のアイコンを探すとき、それはで探すことから始まります：

/wp-admin

それがWordPress 32pxのアイコンがある場所だからです。しかし、CSSの参照は通常あなたのスタイルシートの場所を基準にしています。そのため、最初にアイコンの場所をCSSに追加するときは、参照ポイントとして/ wp-adminを使用する必要があります。そのため、他のほとんどのCSS参照とは異なります。次に、それらの相対URLを使用して、あなたのアイコンがあるディレクトリに行きます。

カスタム投稿タイプ32pxアイコン用のCSSは、次のようになります。

#icon-[your-menu-slug].icon32.icon32-posts-[custom-post-type] {
  background: url('[relative URL, but get out of wp-admin first!]/icon-location') no-repeat;
}

これが他の人に役立つことを願っています！

0
chowwy

あなたのサーバがそうするように特別に設定されていない限り、PHPは.cssファイルでは動作しません。それはあなたがやろうとしていることです。 相対URL は、WordPressのほとんどの部分とは対照的に、スタイルシートではうまく機能します。アイコンへのパスとして相対URLを使用してみてください。

編集する

#icon-albumではありません。それは#icon-editです。 idname__は投稿の種類によっては変わりません。少なくとも私が試した投稿の種類とは異なります。 classname__esが変わります。そのidname__は変わりません。

add_action('admin_head', 'album_foo');
function album_foo() {
    global $post_type;$_GET; ?>
    <?php if (( isset($_GET['post_type'] && $_GET['post_type'] == 'album') || ($post_type == 'album')) : ?>
      <style type="text/css">
    #icon-edit.icon32.icon32-posts-post {
      background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
    } 
      </style>
    <?php endif;
}

空のタグを出力する必要がないので<styleタグを条件付きに移動しました。デバッグを行うと、WARNINGname__sを出力すると<style>タグが壊れる可能性がありました。また、使用する前に$_GET['post_type']が設定されているかどうかを確認するためのチェックも追加しました。

0
s_ha_dum

firebugを使うときに見ているなら

#icon-album.icon32.icon32-posts-album {
  background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
}

それから、文字列'<?php get_template_directory_uri(); ?>/images/album32x32.png'をあなたのcssファイルのbackgroundプロパティに渡します - そしてそれらはphpコードを実行しません。

画像とCSSがテーマフォルダにある場合（または少なくともCSSファイルが画像と同じディレクトリの上にある場合）、相対URLを使用できます。

リリース用のプラグインを開発していて、1行のCSSファイルをエンキューしたくない人のために...

// Adds icon to the page head
add_action('admin_head', 'wpse74477_plugin_header_image');
function wpse74477_plugin_header_image() {
    $post_type = get_current_screen()->post_type;

    if ( 'album' != $post_type )
        return;
    ?>
         <style type="text/css">
            .icon32.icon32-posts-album {
               background: url(<?php echo get_template_directory_uri(); ?>/images/album32x32.png) !important;
            }
         </style>
     <?php
}
0
Stephen Harris