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

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
583 [javascript] React - Apache에 배포하기 file 졸리운_곰 2026.01.25 444
582 [nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함 file 졸리운_곰 2025.12.12 501
581 [프론트앤드] 리액트(React) 간단 문법 정리 file 졸리운_곰 2025.11.19 549
580 [web design][웹디자인][알아봅시다] 왕초보 피그마 기초 사용법???? 셀러님들 지금 당장 피그마 시작하세요! 그대로 따라만 해서 피그마 정복하기 졸리운_곰 2025.07.21 246
579 [Next.js 개발] pm2 로 Next.js 실행하기 졸리운_곰 2025.07.01 480
578 [HTML] [HTTP] 주요 메서드 5가지 정리(GET / POST / PUT / PATCH / DELETE) file 졸리운_곰 2025.04.21 388
577 [JavaScript] Algorithm | Fizz Buzz 졸리운_곰 2025.01.03 365
576 [wordpress, 워드프레스] 워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi) file 졸리운_곰 2024.12.20 545
» [wordpress, 워드프레스] WordPress 페이지또는 글에 별도 CSS와 JavaScript 추가하기 file 졸리운_곰 2024.12.19 353
574 [wordpress 플러그인] 코스모스팜. 회원관리 1.메뉴에 로그인 넣기 file 졸리운_곰 2024.08.25 513
573 [wordpress 플러그인] WP-Members로 회원제 사이트 만들기 file 졸리운_곰 2024.08.25 749
572 [HTML] How to force link from iframe to be opened in the parent window : iframe에서 부모 창에서 열리도록 링크를 강제하는 방법 졸리운_곰 2024.08.22 349
571 [LAMPP] Ubuntu 20.04에서 PHP 8.1을 설치하거나 업그레이드하는 방법 졸리운_곰 2024.08.18 329
570 [Javascript] jQuery 달력 위젯 datepicker 사용하기 file 졸리운_곰 2024.08.13 546
569 [Javascript] onload, ready file 졸리운_곰 2024.08.13 454
568 [javascript] 제이쿼리로 시도, 시군구 선택하기 졸리운_곰 2024.08.13 516
567 [HTML] CSS 파일 불러오기 졸리운_곰 2024.08.09 469
566 [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법 / how to apply scss to html file 졸리운_곰 2024.08.09 383
565 [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법 file 졸리운_곰 2024.08.09 610
564 [php worldpress] 워드프레스 새 서버 이전시 페이지 안나오는 문제 : How to Rewrite URLs with mod_rewrite for Apache on Ubuntu 20.04 file 졸리운_곰 2024.08.07 774
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED