[wordpress, 워드프레스] WordPress 페이지또는 글에 별도 CSS와 JavaScript 추가하기

WordPress 페이지또는 글에 별도 CSS와 JavaScript 추가하기

WordPress 페이지또는 글에 별도 CSS와 JavaScript 추가하기

안녕하세요
RWDB 입니다~!!!

오늘 소개해드릴 내용은 WordPress 관련 내용인데요

WordPress에서 각 페이지나 글 등록시 해당 페이지나 글에만 적용되고 싶은 CSS, JavaScript 꼭 있잖아요??
그걸 쉽게~~ 아주 쉽게 하실 수 있게 하는 내용 입니다.

※ 다음에 소개하는 방법 functions.php을 사용하기 때문에 테마에 functions.php없는 경우 작성하십시오.

 

CSS를 추가 할 수 있도록

CSS를 추가 할 수 있도록하려면 아래 내용을 functions.php에 추가해주시면 됩니다.

functions.php

//Custom CSS Widget
add_action( 'admin_menu', 'custom_css_hooks' );
add_action( 'save_post', 'save_custom_css' );
add_action( 'wp_head','insert_custom_css' );
function custom_css_hooks() {
  add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high' );
  add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high' );
}
function custom_css_input() {
  global $post;
  echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
  echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
  if ( !wp_verify_nonce( $_POST['custom_css_noncename'], 'custom-css' ) ) return $post_id;
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE) return $post_id;
  $custom_css = $_POST['custom_css'];
  update_post_meta( $post_id, '_custom_css', $custom_css );
}
function insert_custom_css() {
  if ( is_page() || is_single() ) {
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      echo '<style type="text/css">' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';
    endwhile; endif;
    rewind_posts();
  }
}

JavaScript를 추가 할 수 있도록

JavaScript를 추가 할 수 있도록하려면 아래 내용을 functions.php에 추가해주시면 끝!

functions.php

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

//Custom JS Widget
add_action( 'admin_menu', 'custom_js_hooks' );
add_action( 'save_post', 'save_custom_js' );
add_action( 'wp_head','insert_custom_js' );
function custom_js_hooks() {
  add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high' );
  add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high' );
}
function custom_js_input() {
  global $post;
  echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
  echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
  if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_js = $_POST['custom_js'];
  update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
  if ( is_page() || is_single() ) {
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      echo '<script type="text/javascript">' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';
    endwhile; endif;
    rewind_posts();
  }
}

CSS와 JavaScript를 모두 사용하시려면 둘다 넣으시면 되겠죠?? ㅋ
functions.php 파일을 저장후 편집 페이지를 확인해보시면 아래 이미지와 같이 추가된걸
확인 하실 수 있습니다. 

 

Custom CSS Write Panel

 

 [출처] http://rwdb.kr/wordpress-page-css-javascript/

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
274 [프론트앤드] 리액트(React) 간단 문법 정리 file 졸리운_곰 2025.11.19 549
273 [HTML] [HTTP] 주요 메서드 5가지 정리(GET / POST / PUT / PATCH / DELETE) file 졸리운_곰 2025.04.21 388
272 [JavaScript] Algorithm | Fizz Buzz 졸리운_곰 2025.01.03 365
271 [HTML] How to force link from iframe to be opened in the parent window : iframe에서 부모 창에서 열리도록 링크를 강제하는 방법 졸리운_곰 2024.08.22 350
270 [Javascript] jQuery 달력 위젯 datepicker 사용하기 file 졸리운_곰 2024.08.13 546
269 [Javascript] onload, ready file 졸리운_곰 2024.08.13 456
268 [javascript] 제이쿼리로 시도, 시군구 선택하기 졸리운_곰 2024.08.13 516
267 [HTML] CSS 파일 불러오기 졸리운_곰 2024.08.09 469
266 [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법 / how to apply scss to html file 졸리운_곰 2024.08.09 383
265 [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법 file 졸리운_곰 2024.08.09 610
264 [HTML] Netlify 로 정적 웹 사이트 배포하기 file 졸리운_곰 2024.07.29 402
263 [JavaScript] 자바스크립트 API 호출 방법 졸리운_곰 2024.06.20 525
262 [HTML][JavaScript] jQuery .ready() vs .onload() 특징 및 차이 졸리운_곰 2024.05.23 442
261 [apache 설정] .htaccess 캐시 및 압축 설정 졸리운_곰 2024.05.22 486
260 [HTML] 로딩이 완료된 후 페이지 노출하기 졸리운_곰 2024.05.22 501
259 [HTML] HTML A tag: name=" " 같은 페이지(문서) 또는 다른 페이지의 특정 위치로 이동하기 졸리운_곰 2024.05.20 411
258 [HTML] Scroll window to top of Iframe from iFrame with different domain than parent file 졸리운_곰 2024.05.20 455
257 [HTML] iframe 간단 정리하기 file 졸리운_곰 2024.05.20 271
256 [HTML] Javascript error: 'window.top.document.getElementById(...)' is null or not an object 졸리운_곰 2024.05.20 206
255 [HTML] iframe 부모 자식 접근 졸리운_곰 2024.05.20 344
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED