[WP] 플러그인을 이용한 사용자 CSS 적용

2018-06-26 by 편리

워드프레스 관리자에서 사용자 CSS 코드를 입력할 수 있는 방법을 이미 제공하고 있지만.. 그럼에도 불구하고 플러그인을 만들어 본 것은 어찌보면 쓸데없는 짓일 수도 있다.

그런데 이렇게라도 워드프레스 관련 작업을 해보지 않으면 알던 것도 잊는 수가 있기 때문에 또 쓸데없는 코딩을 하고 있다. 추가하려는 CSS 코드는 아래와 같다. style.css 파일로 저장한다.

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

body {font-family: 'Noto Sans KR', 'Open Sans',sans-serif}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {color: #DA4453;font-weight: 700;font-family: 'Noto Sans KR','Open Sans', sans-serif;}
blockquote {font-size: 14px}

다음으로 플러그인을 구성하는 PHP 코드는 아래와 같다.

<?php

/**
 * @package Add custom stylesheet
 * @version 1.0.0
 */
/*
Plugin Name: Add custom stylesheet
Plugin URI: https://chicpro.dev/
Description: This plugin add javascript code for shortcuts on footer.
Author: chicpro
Version: 1.0.0
Author URI: https://chicpro.dev/
*/

add_action( 'wp_enqueue_scripts', 'add_custom_stylesheet', 100 );

function add_custom_stylesheet()
{
    wp_enqueue_style( 'add-custom-stylesheet', plugins_url( 'style.css', __FILE__ ), array(), '1.0.0' );
}

위 코드를 적당한 이름으로 저장하고 위 style.css 파일과 동일한 폴더에 넣어 워드프레스 사이트에 업로드 한 후 플러그인을 활성화 시키면 CSS 코드가 적용된다. 만약 style.css 파일의 코드를 변경한 후 변경된 코드가 적용되지 않는다면 1.0.0 으로 표시된 버전을 1.0.1 등으로 변경해줘야 한다.

Leave a Reply Cancel reply