2016-08-14 2 views
0

나는 상황에 따라 해당 단축 코드에 대해 CSS와 JS를 동적으로 변경하기위한 단축 코드를 만들고 있습니다. 이제 문제는 add_shortcode() 안에 add_action()을 사용하는 방법에 대한 단서를 얻지 못한다는 것입니다. 너희들이 나를 더 잘 이해할 수 있도록 내가 당신에게 예제 코드 조각을 들어 보겠습니다 :wordpress shortcode에 인라인 CSS/js를 추가하는 방법

add_shortcode('example', function($atts) { 
    //extracting the shortcode attributes 
    extract(shortcode_atts(array(
     'value1' => null, 
     'value2' => null, 
     'value3' => null 
    ), $atts)); 

    //Now here I wll do my code for the shortcode 
    // But the shortcode needs some js and css to work 
    // so, I'm trying like this 

    //For the CSS 
    add_action('wp_head', function() { 
     echo '<style type="text/css"> 
      .class { 
       background-color: '. $value2 .'; 
      } 
     </style>'; 
    }); 

    //For the JS 
    add_action('wp_footer', function() { 
     echo '<script type="text/javascript"> 
      var a = '. $value3 .' 
     </script>'; 
    }); 

}); 

를 이제 분명히 작동하지 않는 경우의 적절한에서 비슷한 일을 어떻게 나를 인도 할 수 있다면 그래서 나는 기대했다 방법.

가능한 경우 질문에 부정적인 투표 대신 도움주세요.

+0

질문 : 그것은인가 짧은 코드에 js와 css가 필요합니다. CSS를 style.css에 넣고 자바 스크립트 부분을 js 파일에 넣습니다. – meck373

+0

@ meck373 예제 코드를 올바르게 읽지 않았다고 생각합니다. CSS & JS 값이 shortcode 값을 기반으로 동적으로 변경되기 때문에 나는 그것을해야만했던 이유. 위에서 볼 수 있듯이, 나는'$ value2'와'$ value3'를 css & js 섹션에서 적절하게 사용했다. 둘 다 단축 코드에서 나옵니다. 이것이 제가이 접근법을 택한 이유입니다. 다른 질문이 있으면 알려줘. – iSaumya

답변

0

가이 작업을 할 수있는 더 좋은 방법이 될 수 있지만, 현재 단지에하는 것은, 그것이 작동되도록 당신의 코드 문자열을하기 위해선, ADD_ACTION() 부분을 제거하고 반환해야합니다 :

add_shortcode('example', function($atts) { 
    //extracting the shortcode attributes 
    extract(shortcode_atts(array(
     'value1' => null, 
     'value2' => null, 
     'value3' => null 
    ), $atts)); 

    //For the CSS 
     $result = '<style type="text/css"> 
      .class { 
       background-color: '. $value2 .'; 
      } 
     </style>'; 

    //For the JS 
     $result .= '<script type="text/javascript"> 
      var a = '. $value3 .' 
     </script>'; 

    return $result; 
}); 
+0

답장을 보내 주셔서 감사합니다. 그러나 스타일 태그가 'body'내에 채워지므로 좋은 방법은 아닙니다. 많은 연구를 한 후에 이런 종류의 접근법을 사용하고 있습니다. http://pastebin.com/eYi6RAbT 그것이 작동하는지 확실하지 않습니다. 당신은 그것을보고 당신의 생각을 공유 할 수 있습니까? – iSaumya

관련 문제