안녕하세요. 게시글 제목 색깔을 작성자가 지정할 수 있도록 하고싶어요.

일전에 질문을 올리고 답을 받아 제목 색상 입력 text field 까지는 생성을 하여 색상 반영에 성공하였습니다. 감사합니다!

그런데 고객분들은 헥사코드를 모르기때문에 컬러 파레트를 넣고 싶습니다.

자바스크립트 라이브러리를 적용시켜 컬러파레트를 이용하려고 시도를 하였고, 같은 홈페이지의 다른 페이지에서는 성공을 하였습니다.

그런데 케이보드 게시판 속에만 들어가면 실행이 안되는데 이유가 뭔지 모르겠습니다.

형식은 <input cloass="jscolor">라고 태그에 클래스를 적용하면 저절로 실행이 되어야 하는 방식 입니다.

http://jscolor.com/

이 라이브러리를 사용하였는데요.

케이보드 안에서 사용하려면 어떻게 조취를 취해야 할까요?

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

    KBoard 플러그인에서 추가하신 스크립트 파일의 코드를 활용하시려면

    wp_enqueue_script를 이용하셔서 별도의 스크립트 파일을

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/editor.php 파일에도 적용을 해주셔야 할 듯합니다.

    아래의 링크를 참고해보시겠어요?

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    고맙습니다.

  • 안녕하세요, 

    게시판의 제목 색상을 변경하고 싶어서 위에 말씀하신 내용대로 따라해보다가 에러가 생겨서 홈페이지가 다운되었네요. 

    워드프레스 테마의 function.php 파일에 저 코드를 넣으면 되는 건가요?

    솔우님이 하신 것 처럼 그대로 하고 싶은데.. 

     

    일전에 질문을 올리고 답을 받아 제목 색상 입력 text field 까지는 생성을 하여 색상 반영에 성공하였습니다. 감사합니다!<--- 이 게시물을 찾지 못하여서 저는 반영이 안되는 걸까요?

    ㅠㅠ 

    처음부터 어떻게 진행해야 하는지 알려주시면 감사하겠습니다. 

    부탁드립니다. 

     

  • 네. 컬러 잘 들어옵니다.

    정말 감사합니다.

    좋은 하루 보내세요~^^

  • list.php 파일에는 아래의 코드로 적용해보세요.

    <div class="kboard-default-cut-strings"<?php if($content->option->title_color):?> style="color: <?php echo $content->option->title_color?>;"<?php endif?>>

    고맙습니다.

  • 안녕하세요.

    color 입력 필드는 정상적으로 표시되시는지요?

    functions.php 쪽 파일에 추가하신 아래의 코드를

    <input type="color" id="title_color" name="color" value="#e66465">

    아래의 코드로 교체해보시겠어요?

    <input type="color" id="title_color" name="kboard_option_title_color" value="#e66465">

     

    KBoard 플러그인에서 추가하신 입력 필드의 내용을 저장하시려면

    name에 kboard_option_메타키 이런 식으로 설정해주셔야 합니다.

    고맙습니다.

  • 안녕하세요. 다시 초기화해보니 팔레트는 들어갔으나, title_color 값을 list.php에서 가지고 오지를 못하네요.

    한번만 더 코드를 살펴보아 주시기 바랍니다.

    이번에는 일단 input란 js대신 type="color"로 하여 컬러팔레트를 구현해보았습니다.

    제 생각에는 input에 입력된 값이 처리가 제대로 되지 않는 것 같아요 (제가 php를 잘 몰라서요)

    답변주시면 감사하겠습니다.!

     

    function.php

    add_filter('kboard_skin_fields', 'my_kboard_skin_fields', 10, 2);
    function my_kboard_skin_fields($fields, $board){
        
        if($board->id == '6'){ // 실제 적용될 게시판 ID 값으로 변경해주세요.
            
            if(!isset($fields['title_color'])){
                $fields['title_color'] = array(
                    'field_type' => 'title_color',
                    'field_label' => '제목 색상',
                    'class' => 'kboard-attr-text',
                    'hidden' => '',
                    'meta_key' => 'title_color',
                    'field_name' => '',
                    'permission' => '',
                    'roles' => '',
                    'default_value' => '',
                    'placeholder' => '',
                    'required' => '',
                    'show_document' => '',
                    'description' => '',
                    'close_button' => ''
                );
            }
        }
        
        return $fields;
    }


    add_filter('kboard_get_template_field_html', 'my_kboard_get_template_field_html', 10, 4);
    function my_kboard_get_template_field_html($field_html, $field, $content, $board){
        
        if($field['field_type'] == 'title_color'){
            
            // 페이지에 컬러파레트 추가        
            ?>
            <div class="kboard-attr-row">
                <label class="attr-name">제목 색상</label>
                <div class="attr-value">
                    <input type="color" id="title_color" name="color" value="#e66465">
                </div>
            </div>    
            <?php        
        }
        
        return $field_html;
    }

     

    list.php

    <div class="kboard-default-cut-strings">를 다음코드로 교체

    <div class="kboard-default-cut-strings"<?php if($content->option->title_color):?> style="color: <?php echo $content->option->title_color?>;"<?php endif?>">

  • kboard_get_template_field_html 필터가 제대로 실행이 안 된 듯합니다.

    아래의 코드 대신

    <input id="title_color" class="" name="kboard_option_title_color" value="" type="text">

    아래의 코드가 표시돼야 합니다.

    <input class="jscolor" value="ab2567">

     

    입력 필드 설정을 초기화해보시겠어요?

    워드프레스 관리자 -> KBoard -> 게시판 목록 -> 게시판 선택 -> 입력필드 설정 페이지에서

    초기화하신 후에 변경 사항을 저장해보시겠어요?

    고맙습니다.

  • 안녕하세요. 답변 감사합니다.

    게시글 작성 페이지에서 요소검사를 눌러 살펴보니 제가 적어놓은

    <input class="jscolor" value="ab2567">

    이 부분이 코드가 제대로 들어가지 않고 있습니다.

    <input id="title_color" class="" name="kboard_option_title_color" value="" type="text">

    라고 되어있네요.

    어떻게 해야 class를 삽입할 수 있나요?

  • 안녕하세요.

    사용 중이신 테마 쪽에 jscolor.js 파일 경로는 일치하는지요?

    올려주신 코드 중에서

    아래의 코드를

    'field_type' => 'text',

    아래의 코드로 교체하신 후 확인해보시겠어요?

    'field_type' => 'title_color',

    고맙습니다.

  • 말씀해주신대로 해보았는데 적용이 되지 않습니다. ㅠㅠ

    제 코드좀 봐주시겠어요?

     

    function.php 파일

    add_filter('kboard_skin_fields', 'my_kboard_skin_fields', 10, 2);
    function my_kboard_skin_fields($fields, $board){
        
        if($board->id == '6'){ // 실제 적용될 게시판 ID 값으로 변경해주세요.
            
            if(!isset($fields['title_color'])){
                $fields['title_color'] = array(
                    'field_type' => 'text',
                    'field_label' => '제목 컬러',
                    'class' => 'kboard-attr-text',
                    'hidden' => '',
                    'meta_key' => '',
                    'field_name' => '',
                    'permission' => '',
                    'roles' => '',
                    'default_value' => '',
                    'placeholder' => '',
                    'required' => '',
                    'show_document' => '',
                    'description' => '',
                    'close_button' => 'yes'
                );
            }
        }
        
        return $fields;
    }
    add_filter('kboard_get_template_field_html', 'my_kboard_get_template_field_html', 10, 4);
    function my_kboard_get_template_field_html($field_html, $field, $content, $board){
        
        if($field['field_type'] == 'title_color'){
            
            // 페이지에 컬러파레트 추가
            ?>
            <div class="kboard-attr-row">
                <label class="attr-name">제목 색상</label>
                <div class="attr-value">
                    <input class="jscolor" value="ab2567">
                </div>
            </div>
            <?php
            $field_html = ob_get_clean();
        }
        
        return $field_html;
    }
    function wpdocs_scripts_method() {
        wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/jscolor.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );?>

     

    editor.php 파일

    <?php wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/jscolor.js', array( 'jquery' ))?>

     

    두 파일 모두 가장 하단에 붙여넣었는데요.

    무엇이 문제일까요?

  • 코드 수정 후 사이트가 정상적으로 동작하지 않는 건

    코드를 잘못 추가하셔서 그런 듯합니다.

    코드 수정 시 디버그 모드를 활성화하시면

    에러 메시지를 확인해보실 수 있습니다.

    워드프레스 에러 확인하기 - 디버그 모드 활성화 방법

     

    별도로 추가하는 워드프레스 액션, 필터 등의 PHP 코드는

    테마의 functions.php 파일에 코드를 추가하거나 Code Snippets 플러그인을 사용해서 코드를 추가할 수 있습니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기