2013-12-16 2 views
1

확장하여 위젯을 만들었습니다. WP_Widget이 잘 작동합니다. 또한 관리자에게 className이라는 필드를 추가했습니다.사용자 정의 위젯 렌더링 코드에 사용자 정의 CSS 클래스를 추가하는 방법은 무엇입니까?

하지만 위젯의 렌더링 코드에 맞춤 CSS 클래스 이름을 삽입 할 수있는 곳을 찾을 수 없습니다 (물론 전체 위젯에 클래스를 적용하고 싶습니다). 모든 클래스가 aside에 적용 후

<aside id="eppz-page-widget-2" class="widget widget_eppz-page-widget"> 
    <h3 class="widget-title">Title</h3> 
    <h4>Headline!</h4> 
    <p>Some description that can be added optionally to the widget.</p> 
    <p>Class name: featuredPageWidget</p> 
</aside> 

지금 난 정말 className 변수를 추가 할 :

// Before widget. 
echo $before_widget; 

if ($title) 
{ echo $before_title.$title.$after_title; } 

    if ($headline) 
    { echo '<h4>'.$headline.'</h4>'; } 

    if ($description) 
    { echo '<p>'.$description.'</p>'; } 

    if ($className) 
    { echo '<p>Class name: '.$className.'</p>'; } 

// After widget. 
echo $after_widget; 

이의 HTML 출력은 같이 간다. 몇 가지 문자열 함수를 사용하여이 작업을 수행 할 수 있지만이 작업을 수행하는 간단한 WordPressy 방법이 있기를 바랍니다.

답변

1

기본 템플릿 before_widget 주입을 덮어 쓰려는 의도가 전혀 없었기 때문에 템플릿 구현에 영향을주지 않는 기발한 해결 방법을 생각해 냈습니다.

클래스 이름으로 자리 표시자를 사용하고 코드를 렌더링 코드로 바꾸기 만하면됩니다.

는 읽기 전용 클래스 속성 설정 :에서 렌더링

$widgetOptions = array 
(
    'classname' => $this->getClassNamePlaceHolder(), 
    'description' => 'Lovely widget description for humans.' 
); 

위젯 매개 변수로 자리 바꾸기 :

function getClassNamePlaceHolder() 
{ return 'EPPZPageWidgetClassNamePlaceHolder'; } 

설정 건축시 위젯의 클래스 명으로입니다

function widget($args, $instance) 
{ 

    // ... 

    // Exchange default class name to custom. 
    $classNamePlaceHolder = $this->getClassNamePlaceHolder(); 
    $before_widget_withCustomClassName = str_replace($classNamePlaceHolder, $customClassName, $before_widget); 

    // Before widget. 
    echo $before_widget_withCustomClassName; 

그리고 거기.

<aside id="eppz-page-widget-2" class="widget MyCustomClassName"> 
    <h3 class="widget-title">eppz! page widget</h3> 
    <h4>Headline!</h4> 
    <p>Some content goes here.</p> 
</aside> 
0

먼저

<?php 
public function __construct() { 
    $widget_ops = array(
     'classname'     =>; 'widget_text eaa __eaa__', //__eaa__ is my placeholder css class 
     'description'     =>; __('AdSense ads, arbitrary text, HTML or JS.','eaa'), 
     'customize_selective_refresh' =>; true, 
    ); 
    $control_ops = array('width' =>; 400, 'height' =>; 350); 
    parent::__construct('eaa', __('Easy AdSense Ads &amp; Scripts', 'eaa'), $widget_ops, $control_ops); 
} 
?> 

그리고 생성자에서 사용자 지정 자리 표시 자 클래스를 추가 : 실제 before_widget 구현 뭐든간에 는,이 방법은 안전하게 전체 위젯 사용자 정의 클래스 이름 (아래 MyCustomClassName 참조) 설정 우리는저기서하는이

<?php 
if ($instance['no_padding']) { 
    $args['before_widget'] = str_replace('__eaa__', 'eaa-clean', $args['before_widget']); 
} 
?> 

같은 위젯 옵션에 따라 선택의 클래스/ES로 교체 g before_widget의 HTML이

당신은 http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/

에서 예와 세부 사항을 찾을 수있는 우리의 플러그인 기능에 영향을 줄 수있는 방법을 제한 할 수있는 장소 홀더
관련 문제