web-dev-qa-db-ja.com

WordPressのメニューにフォントの素晴らしいアイコンを追加する方法？

WordPressのメニューにフォントの素晴らしいアイコンを追加する方法

plugin-developmenttheme-development
3
Chirag Pipariya

ダッシュボードにカスタムアイコンを追加したいと思いますか。ワードプレスの3.8への最新のアップデートで、ダッシュボードのアイコンが変わりました。それらは現在実際にはフォントです。フォントはcssで色を簡単に変えることができ、サイズも同様に反応しやすいので、これは実際にはかなりクールです。

最初に、MP6チーム（最新のダッシュボードの開発者）によって作成されたビルド済みのダッシュを使ってカスタムアイコンを追加する方法をお教えします。 http://melchoyce.github.io/dashicons/ /にアクセスすると、現在利用可能なすべてのダッシュが表示されます。現在のメニュー項目を変更したい場合は、これを行う機能です。これをあなたのテーマのfunctions.phpファイルかあなたのカスタムプラグインに追加してください。これにより、[投稿]メニューのデフォルトのアイコンが変更されます。

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

あなたがカスタム投稿タイプのアイコンを追加したい場合、それは少しひねりを加えたものとほぼ同じです。

function cptname_custom_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'cptname_custom_css');

「cptname」の代わりにカスタム投稿タイプ名を挿入します。今ねじれ。カスタム投稿タイプcssにクラスを追加する必要があります。これを行うには、カスタム投稿タイプ登録フックに1行のコードを追加するだけです。

'menu_icon' => '',

だから私たちの全体の登録フックはこんな感じになります：

$args = array(
 'labels' => $labels,
 'menu_icon' => '',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true, 
 'show_in_menu' => true, 
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'has_archive' => true, 
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title', 'editor', 'thumbnail')
); 
 register_post_type('cptname',$args);
}

あなたが素晴らしいフォントアイコンを使用したいのであれば今、私たちは私たちのテーマにそれらをアップロードする必要があります。フォントをダウンロードして、CSSとフォントファイルを現在のテーマの適切なフォルダに置きます。それからthemes functions.phpファイルかあなたのカスタムプラグインにさらにコードを追加する必要があります。

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action('admin-init', 'my_custom_fonts');

そして今、私たちは選択的に私たちの新しいアイコンを選ぶために上記のコードを使います。これもまた、FontAwesomeアイコンセットを使用して[投稿]メニューアイコンを変更します。

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\fa-Apple'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

これがお役に立てば幸いです。私は実際にはフォントの素晴らしいアイコンをまだ使っていませんが、すでに私のダッシュボードのアイコンをカスタマイズしています。私は最新のダッシュボードのオーバーホールを愛していますが、習熟曲線があります。

ちょうど編集をしました：私はここでいくつかのことを試してみて、実際に私自身のサイトで素晴らしいフォントアイコンを使用しました：

これをあなたのfunctions.phpまたはプラグインに追加してください：

function font_admin_init() {
   wp_enqueue_style('font-awesome', 'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); 
}

add_action('admin_init', 'font_admin_init');

次にこれを追加して実際のアイコンを選択します。

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\f0f2'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Cssファイルにリストされているコードを見つけることができます。

5
RiotAct

フロントエンドのために、私はこれを使っています：

// Add font awesome CSS http://fortawesome.github.io/Font-Awesome/examples/
function awesome_css() {
    wp_enqueue_style("fontawesome", 'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
}
add_action( 'wp_enqueue_scripts', 'awesome_css' );

Adminを追加するには、ここを見てください： https://github.com/raket/fontawesome-for-wordpress/blob/master/fontawesome.php それはうまくいくだろう解決策を持っているようです

2
TomC

FontAwesomeを使用したステップバイステップの例：

色とカスタム投稿の種類を含む ????

1アイコンを選ぶ

2 SVGを入手する

SVGをWordpressに取り込む

  • カスタム投稿タイプを登録するfunctions.php内に、次のスニペットを追加します。

    add_action('init', 'my_init');
function my_init() {
    register_post_type('labs', [
        'label' => 'Labs',
        // .. ect
        'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
     ]);
}

重要な注意事項：

  • base64_encodeの内容はFont Awesomes githubページからコピーされた生の文字列です。
  • Svg文字列内の2つの小さなことを変更する必要があります。
    • 1：path/s要素にfill="black"属性を追加 - これはWordpressで色を変えることを可能にします。
    • 2：（オプション）幅と高さを20に変更します。これは管理者の幅/高さのサイズであり、それがより鮮明な結果になるようです。

enter image description here 

0
Chris