베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

텍스트 하이라이터(형광펜) 플러그인

Last Updated: 2020년 1월 25일 | 16개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

Simple Text Highlighter Shortcode Plugin for WordPress

텍스트를 원하는 색상으로 형광펜 처리를 하는 간단한 워드프레스 플러그인을 만들어보았습니다. Simple Text Highlighter Shortcode Plugin for WordPress는 매우 가벼운 플러그인으로 텍스트를 하이라이트하는 숏코드를 제공합니다. (다운로드는 아래 Updated 섹션에서 가능합니다.)

설치 방법

  • 아래의 코드를 복사하여 테마의 함수 파일에 붙여넣기 합니다. 반드시 차일드 테마를 설치하여 작업하세요.

사용 방법

숏코드 [high]와 [/high]를 사용하여 텍스트를 하이라이트 처리할 수 있습니다.

예제:

  • [high]텍스트[/high] -> 기본적으로 노란색으로 하이라이트합니다.
  • [high color="red" bg="blue"]텍스트[/high] -> 파란색으로 하이라이트하고 텍스트 색상을 빨간색으로 설정합니다.
  • [high bg="grey" color="white" size="20px"  left="5px"]테스트[/high] -> Background color: grey, Text-color: white, Text-size: 20px, Padding-left: 5px

지원되는 속성자:

  • bg = background-color
  • color = text-color
  • padding = padding
  • size = text-size
  • left = padding-left
  • right = padding-right
  • top = padding-top
  • bottom = padding-bottom
  • border = border
  • bbotom = border-bottom
  • radius = border-radius
  • weight = font-weight
  • height = line-height

매우 단순한 숏코드 플러그인이기 때문에 모든 환경에서 문제없이 작동할 것입니다. 문제가 있으면 댓글로 알려주시기 바랍니다.

Updated:

속성자가 추가되었고 스타일이 지정된 사전 설정(Preset)이 추가되었습니다.

  • [pcode]wp_redirect()[/pcode] => wp_redirect()
  • [kbd]Ctrl + C[/kbd] => Ctrl + C
  • [navytext]문장이나 어구[/navytext] => 문장이나 어구

다운로드에 문제가 있는 경우 아래 코드를 복사하여 사용 중인 워드프레스 테마의 함수 파일에 추가하시기 바랍니다.

/*
Plugin Name: Simple Text Highliter Shortcode
Plugin URI: https://www.thewordcracker.com/
Description:
Author: WordCracker
Version: 1.2
Author URI: https://www.thewordcracker.com/
*/

add_shortcode('high', 'highlighter_span_shortcode');
function highlighter_span_shortcode($atts, $content = null) {
extract(shortcode_atts(array('color' => '', 'bg' => 'yellow', 'size' => '', 'padding' => '', 'left' => '', 'right' => '', 'top' => '', 'bottom' => '', 'border' => '', 'bbottom' => '', 'radius' => '', 'weight' => '', 'height' => ''), $atts));
$return = '<span style="';
if (!empty($color)) $return .= 'color:'.$color.';';
if (!empty($bg)) $return .= 'background-color:' .$bg.';';
if (!empty($size)) $return .= 'font-size:'.$size.';';
if (!empty($padding)) $return .= 'padding:'.$padding.';';
if (!empty($left)) $return .= 'padding-left:'.$left.';';
if (!empty($right)) $return .= 'padding-right:'.$right.';';
if (!empty($top)) $return .= 'padding-top:'.$top.';';
if (!empty($bottom)) $return .= 'padding-bottom:'.$bottom.';';
if (!empty($border)) $return .= 'border:'.$border.';';
if (!empty($bbottom)) $return .= 'border-bottom:'.$bbottom.';';
if (!empty($radius)) $return .= 'border-radius:'.$radius.';';
if (!empty($weight)) $return .= 'font-weight:'.$weight.';';
if (!empty($height)) $return .= 'line-height:'.$height.';';
$return .= '">';
return $return . $content . '</span>';
}

function code_formatting($atts, $content = null) {
$return ='<span class="codeformatting" style ="padding: 2px 4px; font-size: .95em; color: #c7254e; background-color: #f9f2f4; border-radius: 4px;">';
return $return . $content . '</span>';
}
add_shortcode('pcode', 'code_formatting');

function keyboard_shortcuts_formatting($atts, $content = null) {
$return ='<span class="keyboardshortcode" style ="display: inline-block; padding: 3px 5px; font-size: .85em; line-height: 14px; color: #333; background-color: #fcfcfc; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 3px; box-shadow: inset 1px -1px 1px #fff, inset -1px 1px 1px #fff;">';
return $return . $content . '</span>';
}
add_shortcode('kbd', 'keyboard_shortcuts_formatting');

function navytext_formatting($atts, $content = null) {
$return ='<span class="navytext" style ="color: #ffffff; background-color: #006699; font-weight: bold;">';
return $return . $content . '</span>';
}
add_shortcode('navytext', 'navytext_formatting');

 

참고:



16 개 댓글

Leave a Comment

  1. 혹시 다운로드는 어떻게 하는건가요..? Update 쪽에 zip 파일이 업로드 되어 있는게 안보이네요..ㅠㅠ

    응답
    • 안녕하세요?

      불편을 드려 죄송합니다.

      다운로드 관련 플러그인을 삭제하면서 이 글에 첨부 파일이 있는지 미처 확인하지 못했습니다.

      대신 위에 있는 코드를 복사하여 사용 중인 워드프레스 테마의 함수 파일에 붙여넣으시면 됩니다.

      코드를 넣어보시고 만약 문제가 발생하면 코드만 삭제하면 됩니다.

      응답
      • functions.php 에 삽입하고 사용하면 된다는 말씀이시죠? ^^
        감사합니다!

      • 네, 맞습니다.
        맨 끝에 추가하시면 됩니다.

      • 정말 죄송한데요.. 제가 글을 작성할 때 특정 문단만 형광펜으로 칠하고 싶은데요. 적용은 어떤 방식으로 하면 될까요..? Word님의 다른 포스팅도 봤는데 이해가 잘 안되네요..ㅠㅠ 죄송합니다...

      • 아..!! [high] 내용 [/high] 하면 되네요 감사합니다!!ㅎㅎ

      • 본문에 [high]...[/high]를 입력하면 스타일이 적용되기 때문에 부득이하게 {high}...{/high}로 입력한 것입니다.

        시간이 될 때 숏코드로 인식하지 않도록 [...]를 입력하는 방법을 찾아볼 예정입니다.

        즐거운 저녁시간 되세요^^

  2. 감사합니다~

    Veteran님 댓글이 스팸으로 분류되어 이제 확인했습니다.

    CSS에서 직접 조정해야 하는 내용을 세세하게 조정하기 위해 개인적인 차원에서 만든 플러그인입니다.

    자주 사용하는 것이라면 TinyMCE에 추가해도 좋을 것 같습니다.

    응답
  3. 반갑습니다. 와~ 플러그인을 직접 만들어 사용하시네요.

    TinyMCE 버튼을 추가하는 것은 어떨까요? (WC님이 원하는 것이 맞는지 모르겠는데) 좀 더 편하지 않을까 생각하게 됩니다. 기본으로 생략된 텍스트 배경색, 위첨자, 아래첨자 등등의 버튼을 사용하려면..


    add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );
    function my_mce_buttons_3( $buttons ) {
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'fontselect';
    $buttons[] = 'backcolor'; // 문자 배경색
    $buttons[] = 'superscript';
    $buttons[] = 'subscript';
    $buttons[] = 'styleselect'; // Drop down 메뉴로
    return $buttons;
    }

    혹시 아시는 거라면 무시하세요.^^

    응답
  4. 안녕하세요. 업데이트된 버전을 다운 받으려고 했더니, 패스워드(simple)가 틀리다고 하네요.
    알려 주실 수 있으련지요?

    응답
    • 안녕하세요?

      사실 별로 호응이 없어서 개인적으로 그때그때 업데이트하여 사용하고 있었습니다.
      최신 버전으로 업데이트했으니 참고하세요.
      내용도 업데이트했습니다.
      사실 위의 플러그인 하나면 대부분의 텍스트 효과를 구현할 수 있습니다. HTML 코드를 알면 사용이 쉬울 것입니다.

      그럼, 즐거운 하루되세요.

      응답
      • 에고에고. 이번엔 링크가 만료되었다고 하네요. 확인 좀 부탁드립니다.

      • 저는 테스트해보니 다운로드가 잘 되네요... 잘 안 되면 위의 코드를 복사하여 함수 파일에 추가하여 사용해보시기 바랍니다. 수고하세요.

      • 지금 다시 해 보니까, 다운로드가 되네요. 뭔가 잠시 오류가 있었던 것 같습니다. 플러그인 너무 좋은데요. 심플해서 더욱 좋습니다. 잘 사용하겠습니다.
        제 블로그는 xiphiasilver.co-story.net 입니다. 모의해킹에 관심에 있으시면 한 번 방문해봐 주세요. ^^

      • 우와 굉장하시네요.

        해킹이라고 하면 부정적으로 들리지만 "모의해킹"은 기업 시스템의 보안 문제를 파악하여 개선할 수 있도록 해주는 중요한 역할을 하는 것으로 알고 있는데, 제가 제대로 이해하고 있는지 모르겠네요.

        사이트를 잠시 들렸는데 예상대로 쉽지 않은 내용을 다루는 것 같네요.
        시간이 될 때 자주 들려보겠습니다.

        참고로 댓글 시스템을 Disqus로 바꾸면 SEO 등 여러 측면에서 유익하다고 하네요. 그래서 저도 최근에 큰(?) 맘 먹고 Disqus로 바꾸었는데 생각보다 좋은 것 같습니다. 댓글을 Disqus로 바꾸는 것을 한 번 고려해보시기 바랍니다.

        즐거운 주말과 휴일 되시기 바랍니다^^

      • 생각해보니 "중급" 카테고리의 경우 복사 방지가 되어 있네요. 댓글에 적힌 이메일 주소가 정확한가요? 메일로 파일을 직접 보내드릴까요?