[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/

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
126 [프론트앤드] 리액트(React) 간단 문법 정리 file 졸리운_곰 2025.11.19 549
125 [JavaScript] Algorithm | Fizz Buzz 졸리운_곰 2025.01.03 365
124 [Javascript] onload, ready file 졸리운_곰 2024.08.13 456
123 [HTML][JavaScript] jQuery .ready() vs .onload() 특징 및 차이 졸리운_곰 2024.05.23 442
122 [JavaScript] JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드 졸리운_곰 2024.05.18 402
121 [JavaScript] How to select all tag elements with JS 졸리운_곰 2024.05.18 11104
120 [JavaScript] 자바스크립트 javascript 정규식 replace html 제거 태그 제거 졸리운_곰 2024.05.18 614
119 [JavaScript] Checking if iframe contents are loaded? : iframe 로딩 완료 이벤트 확인 졸리운_곰 2024.05.18 533
118 [JavaScript] 자바스크립트 DIV 보이기, 숨기기(토글) 졸리운_곰 2024.05.16 501
117 [JavaScript] [JS] XPath로 element 찾기 file 졸리운_곰 2024.05.16 495
116 [JavaScript] Force-DOM-reflow-JS 졸리운_곰 2024.05.16 522
115 [JavaScript] Javascript XPath를 이용해서 Dom Element 가져오기 졸리운_곰 2024.05.15 496
114 [JavaScript] Introduction to using XPath in JavaScript 졸리운_곰 2024.05.15 504
113 [JavaScript] JavaScript :: 요소 가져오기 file 졸리운_곰 2024.05.15 579
112 [JS] 문자열의 위치 찾기 & 문자열 추출하기 file 졸리운_곰 2024.02.28 573
111 [JavaScript] lastIndexOf() : String에서 원하는 값의 마지막 위치(index) 찾기 졸리운_곰 2024.02.28 544
110 [Javascript] [Javascript] 자바스크립트에서 Class 사용하기-constructor, extends, file 졸리운_곰 2023.11.29 616
109 [Javascript] undefined와 null의 차이점이란 ? 졸리운_곰 2023.11.29 476
108 [JavaScript] [JS] CORS 정리 및 오류 해결 졸리운_곰 2023.05.09 454
107 [JavaScript] 자바스크립트 객체 배열에서 indexOf 사용방법 졸리운_곰 2023.01.26 480
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED