WP 3.8의 관리자 메뉴 아이콘에 Dashicons를 사용하여 CPT 등록


15

WordPress 3.8에는 플러그인 MP6이 핵심으로 도입되어 Dashicons라는 상징적 인 글꼴을 사용하여 대시 보드에 글꼴을 표시합니다.

이제 register_post_type'menu_icon' 에 CPT 관리 메뉴 항목에 대한 사용자 정의 아이콘을 지정할 수 있는 인수가 있다는 것을 잘 알고 있습니다.

플러그인 / 테마에서 나는 종종 3.8 이전의 관리자 메뉴에 밝은 배경이 있었기 때문에 일반적으로 어둡게 내 사용자 정의 아이콘 이미지와 함께 그 주장을 사용합니다. WP 3.8의 기본 어두운 메뉴 배경으로 인해 아이콘이 거의 보이지 않습니다.

그 외에도 제 CPT에 새로운 대시 아이콘을 사용하는 것이 좋습니다.

몇 가지 연구를 한 후에 대시 아이콘에서 CSS를 사용할 수 있다는 것을 알고 있습니다.

#menu-posts-mycpt div.wp-menu-image:before { content: "\f226"; }

그러나 'menu_icon'인수 register_post_type 이전 CSS 를 모두 사용하면 WP 3.8의 아이콘과 하나의 아이콘 + WP 3.8의 이상한 문자가 인쇄되며 사용 'menu_icon'인수가 없으면 이전 버전에서는 기본 아이콘이 사용됩니다.

나는 조건부로 추가 할 수 있습니다 알고 'menu_icon'있는 register_post_typeWP 3.8- 버전과 조건 3.8+ WP에 대한 이전 CSS를 추가 할 수 있지만 :

  • 등록 된 모든 CPT에 대해 일부 코드 (2 개의 조건문)를 추가해야 하므로 플러그인 / 테마를 업데이트하는 것은 매우 어려운 작업입니다
  • 그것은 우아한 솔루션보다 더 많은 해결 방법 인 것 같습니다.

따라서 질문은 다음과 같습니다.

WP 3.8+에 대시 아이콘 CSS를 사용하고 'menu_icon'등록 된 모든 CPT에 대해 2 개의 조건을 추가하지 않는 "더 간단한"방식으로 이전 버전의 매개 변수를 통해 사용자 정의 이미지 설정을 사용할 수 있습니까?

그렇다면 가능하다면 추가 코드없이 어떤 자동 방법 으로도 가능합니까 register_post_type?

답변:


9

토끼 구멍을 뚫고 돌아온 후에 대답은- 그렇습니다 . 코어는 게시물 유형을 등록하고 메뉴 페이지를 추가 할 때 대시 아이콘을 쉽게 사용할 수 있습니다.

당신의 CSS 클래스를 전달해야 dashicon 사용 dashicons-[name]menu_icon또는 icon_url관련 장소에서.

이용 가능한 수업 dashicons.css은 소스 또는 Dashicons 사이트 에서 찾을 수 있습니다 (아이콘을 클릭하고 상단에서 이름을 확인하십시오).

경보! 3.8 dashicons-piechart인라인 문서의 클래스 예제로 출시 된 것 같습니다 . 잘못된 것으로 작동하지 않습니다. 릴리스에서 해당 아이콘의 실제 클래스는 dashicons-chart-pie입니다.


나는 그것을하는 올바른 방법이기 때문에 이것을 받아 들였습니다. 내 플러그인은 이전 버전과의 호환성이 뛰어나고 char 대신 클래스 이름을 사용하도록 수정할 수 있습니다 .dashicons 클래스를 넣으면 menu_icon이전 버전의 이미지 URL을 사용할 수 없으므로 과거를 걱정하는 사람은 누구입니까? :)
gmazzap

4

쉬움 : register_post_type()phpDocBlock 의 관련 부분을 읽은 다음 menu_icon: D에 올바른 인수를 사용하십시오 .

  • dashicons 클래스를 사용하십시오 . 예를 들어dashicon-groups
  • 데이터 URI를 사용하여 base64로 인코딩 된 SVG를 전달합니다.이 URI는 색상 구성표와 일치하도록 색상이 지정됩니다. 로 시작해야합니다 data:image/svg+xml;base64,.
  • 패스 'none'떠날 div.wp-menu-image아이콘이 CSS를 통해 추가 할 수 있도록 빈.

1
* Dashicons 수업은 @Rarst가 그의 답변에서 말하는 것입니다. * base64-encode를 사용하면 유용 할 수 있지만, svg-painer.js색상 변경을 처리하는 데 사용되는 핵심 js 라이브러리는 아이콘이 표준 대시 아이콘보다 "복잡한"경우 시간이 많이 소요될 수 있습니다. * 세 번째 옵션 (빈 아이콘)은 WP 3.8+에만 유효하지만 오랜 시간이 지난 후 ... CSS를 사용하는 것은 피해야 할 문제입니다 (질문에 따라). 모든 옵션을 함께 모아서 +1이지만 이미 받아 진 대답은 이미 내 질문에 답한 것 같습니다. 추신 : 당신의 이름 근처에서 그 다이아몬드를 보게되어 기쁘다 :)
gmazzap

@GM svg-painter.js파일 에 대한 재미있는 정보 . 아직 시도하지 않았으므로 그것을 몰랐습니다.
카이저

1
일단 마우스 호버에 색상 변경 효과를 만들기 위해 약간 복잡한 svg 이미지 (간단한 건물 식물)에서 사용하려고했습니다. 대기 시간이 너무 길어서 다른 접근 방식을 포기하고 사용했습니다.
gmazzap

2
@GM 감사합니다. 당신은 그것에 대해 블로그 게시물을 작성해야합니다 :) 내가 찾고 있었고 내가 찾을 수있는 유일한 유용한 것은 Sven의 것 입니다.
카이저

3

나는 오늘 내가 게시 한 두 가지 질문을 스스로에게 물었고 답변을 찾기 위해 시간을 보냈기 때문에 스스로 대답하고 있습니다. 솔루션을 찾은 후에는 공유하고 싶지만 다른 솔루션은 엄청나게 수정되었으며 내 솔루션보다 더 나은 솔루션을 수용 할 준비가되었습니다. 내 솔루션에 대한 편집 및 개선은 고맙게도 감사합니다.


편집하다

Rarst 답변 후 코드를 편집했습니다. 이제 함수는 표준 대시 아이콘 클래스를 사용하지만 인수에 이전 스타일 이미지 URL을 지정하고 인수에 새로운 대시 아이콘 클래스 를 지정할 수도 있습니다 .menu_iconmenu_dashicon


워크 플로우

먼저 생각한 것은 register_post_type액션을 발생시키는 것으로 , registered_post_type인자를 전달 register_post_type하지 않고 전달 된 인자를 후킹하는 함수에 전달 하는 것입니다.

그래서 나는 'menu_dashicon'맞춤 대시 아이콘을 전달 하기 위해 인수 를 전달 하기로 결정했습니다 .

그 후 나는 그 인수를 듣고 클래스 변수에 아이콘을 저장하는 클래스를 만들려고 생각했습니다. 같은 클래스가 책임을 질 수 있습니다

  1. WP의 currnt 버전을 확인하십시오. 3.8보다 작 으면 아무 것도 수행하지 마십시오.
  2. 버전이 3.8 이상인 경우 $menu적절한 후크 에서 어레이를 루프 하고 다음을 수행하십시오.
  3. 존재하는 경우, 사용자 정의 이미지를 통해 추가, 제거 'menu_icon'
  4. 'menu_dashicon'매개 변수 를 통해 추가 된 내용에 따라 인라인 스타일을 추가하십시오.

단일 파일로 코드를 작성하면이 방식으로 모든 테마 / 플러그인에 쉽게 포함되거나 MU 플러그인으로 사용할 수 있으며 그 후에는 'menu_dashicon'설치된 모든 테마 및 / 또는 플러그인에서 완전히 새로운 인수를 사용할 수 있습니다 .

또한 독립형 플러그인으로 사용할 수있는 최소 플러그인 헤더를 추가했지만 사용 방법이 덜 유용합니다.

사용하는 방법

내부 register_post_type그냥 통과 'menu_dashicon'합니다 (dashicon 클래스의 값을 인수 없이 접두사 'dashicons-'을) :

$args = array(
  ...
  'menu_dashicon' => 'chart-pie', // dashicons will be used in WP 3.8+
  'menu_icon' => $url_of_the_icon // icon images will be used in WP 3.7.1 & previous
);

register_post_type('my_cpt', $args);

그게 다야. 사이트 에서 Dashicons 아이콘 클래스 이름을 가져옵니다 .

여기 코드가 있습니다 :

<?php
/**
* Plugin Name: GM CPT Icon
*/
namespace GM;

class CptIcon {

  public static $cpt;

  public $css;

  static function registerIcon( $cpt, $icon ) {
    self::$cpt[$cpt] = $icon;
  }

  function init() {
    if ( $this->mp6() ) {
      \add_action('admin_menu', array($this, 'parseMenu') );
    }
  }

  function mp6() {
    return \version_compare( $GLOBALS['wp_version'],  '3.8', '>=' );
  }      

  function parseMenu() {
    if ( $this->mp6() && ! empty( self::$cpt ) )  {
      foreach ( $GLOBALS['menu'] as $i => $item ) {
        if  $item[1] === 'edit_posts' && (strpos($item[2], 'edit.php?post_type=') === 0)) {
          $this->menuItemClass($i, str_replace('edit.php?post_type=', '', $item[2]));
        }
      }
    }
  }

  function menuItemClass( $i, $type ) {
    if ( \in_array($type, \array_keys(self::$cpt), TRUE ) ) {
      $GLOBALS['menu'][$i][4] = str_replace('menu-icon-post', '', $GLOBALS['menu'][$i][4]);
      $GLOBALS['menu'][$i][6] = 'dashicons-' . self::$cpt[$type];
    }
  }

}

\add_action('plugins_loaded', function() {
  if ( \is_admin() && !( \defined('DOING_AJAX') && \DOING_AJAX  ) ) {
    $cpticon = new CptIcon;
    $cpticon->init();
  }
});

\add_action('registered_post_type', function( $post_type, $args ) {
  if ( isset($args->menu_dashicon) && ! empty($args->menu_dashicon) ) {
    CptIcon::registerIcon($post_type, $args->menu_dashicon);
  }
}, 10, 2);

Gist 로도 사용 가능


대시 아이콘을 사용한 CPT

두 개의 CPT : Dashicon을 사용하는 "아이디어"및 "갤러리" 다른 관리자 색 구성표를 사용하여 자동 색 변경에 유의하십시오.



0

사용자 지정 게시물 유형을 등록하는 코드에이 행을 추가했습니다.

'menu_icon'    => 'dashicons-admin-users',

전체 코드 는 다음과 같습니다

여기에 이미지 설명을 입력하십시오

CSS를 추가 할 필요가 없습니다.


그것은 @Rarst가 그의 대답에서 말하는 정확한 것입니다.
gmazzap

Rarst는 CPT 또는 링크 된 전체 스 니펫을 생성하는 코드에 추가 해야하는 코드 줄을 제공하지 않습니다. 또한 CSS가 필요하지 않으므로 솔루션이 더 효율적입니다.
Brad Dalton
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.