필드 레이블에 이미지를 넣을 수 있나요?

안녕하세요.

어려운 상황 가운데 일일이 답변을 주셔서 너무나 감사합니다.

질문 내용은 "필드 레이블에 이미지 링크를 삽입하여 이미지를 표시"할 수 있는지 여쭙습니다.

그럼 도움 부탁드립니다.

감사합니다.

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    말씀하신 필드 레이블은 KBoard 입력 필드를 말씀하시는 건지요?

    사용 중이신 입력 필드 타입에 따라 코드가 다릅니다.

    어떤 필드를 활용 중이신지 알려주시겠어요?

    고맙습니다.

  • 필드 레이블은 KBoard 입력 필드입니다.
    Text와 Textarea 필드에서 활용 가능했으면 합니다.
    수고에 감사드립니다.
  • 글쓰기 페이지에서 레이블에 이미지를 표시하시려면

    kboard_get_template_field_html 필터를 활용해보시겠어요?

    예제 코드는 아래와 같습니다.

    add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20201029', 10, 4);
    function kboard_get_template_field_html_20201029($field_html, $field, $content, $board){
    	if($board->id == '1'){ // 실제 게시판 id로 적용해주세요.
    		$fields = $board->fields();
    		$meta_key = (isset($field['meta_key']) && $field['meta_key']) ? $field['meta_key'] : '';
    		$field_name = (isset($field['field_name']) && $field['field_name']) ? $field['field_name'] : $field['field_label'];;
    		$required = (isset($field['required']) && $field['required']) ? $field['required'] : '';
    		$default_value = (isset($field['default_value']) && $field['default_value']) ? $field['default_value'] : '';
    		$placeholder = (isset($field['placeholder']) && $field['placeholder']) ? $field['placeholder'] : '';
    		
    		if($field['field_type'] == 'text' && $meta_key == '메타키1'){
    			ob_start();
    			?>
    			<?php if(isset($field['hidden']) && $field['hidden']):?>
    				<input type="hidden" id="<?php echo esc_attr($meta_key)?>" class="<?php echo esc_attr($required)?>" name="<?php echo esc_attr($fields->getOptionFieldName($meta_key))?>" value="<?php echo $content->option->{$meta_key}?esc_attr($content->option->{$meta_key}):esc_attr($default_value)?>">
    			<?php else:?>
    				<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> meta-key-<?php echo esc_attr($meta_key)?> <?php echo esc_attr($required)?>">
    					<label class="attr-name" for="<?php echo esc_attr($meta_key)?>"><img src="이미지주소2"><span class="field-name"><?php echo esc_html($field_name)?></span><?php if($required):?> <span class="attr-required-text">*</span><?php endif?></label>
    					<div class="attr-value">
    						<input type="text" id="<?php echo esc_attr($meta_key)?>" class="<?php echo esc_attr($required)?>" name="<?php echo esc_attr($fields->getOptionFieldName($meta_key))?>" value="<?php echo $content->option->{$meta_key}?esc_attr($content->option->{$meta_key}):esc_attr($default_value)?>"<?php if($placeholder):?> placeholder="<?php echo esc_attr($placeholder)?>"<?php endif?>>
    						<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
    					</div>
    				</div>
    			<?php endif?>
    			<?php
    			$field_html = ob_get_clean();
    		}
    		else if($field['field_type'] == 'textarea' && $meta_key == '메타키2'){
    			ob_start();
    			?>
    			<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> meta-key-<?php echo esc_attr($meta_key)?> <?php echo esc_attr($required)?>">
    				<label class="attr-name" for="<?php echo esc_attr($meta_key)?>"><img src="이미지주소2"><span class="field-name"><?php echo esc_html($field_name)?></span><?php if($required):?> <span class="attr-required-text">*</span><?php endif?></label>
    				<div class="attr-value">
    					<textarea id="<?php echo esc_attr($meta_key)?>" name="<?php echo esc_attr($fields->getOptionFieldName($meta_key))?>"class="editor-textarea <?php echo esc_attr($required)?>"<?php if($placeholder):?> placeholder="<?php echo esc_attr($placeholder)?>"<?php endif?>><?php echo $content->option->{$meta_key}?esc_textarea($content->option->{$meta_key}):esc_textarea($default_value)?></textarea>
    					<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
    				</div>
    			</div>
    			<?php
    			$field_html = ob_get_clean();
    		}
    	}
    	
    	return $field_html;
    }

    위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해보세요.

    메타키1 부분은 필드 타입이 text인 필드의 메타키로 적용해보세요.

    메타키2 부분은 필드 타입이 textarea인 필드의 메타키로 적용해보세요.

    이미지주소1, 이미지주소2 부분은 실제 이미지 주소로 적용해보세요.

     

    게시글 본문에서는 kboard_document_add_option_value_field_html 필터를 활용하시면

    필드 레이블에 이미지를 표시하실 수 있습니다.

    예제 코드는 아래와 같습니다.

    add_filter('kboard_document_add_option_value_field_html', 'kboard_document_add_option_value_field_html_20201029', 10, 4);
    function kboard_document_add_option_value_field_html_20201029($html, $field, $content, $board){
    	$meta_key = isset($field['meta_key']) ? $field['meta_key'] : '';
    	$field_name = isset($field['field_name']) ? $field['field_name'] : $field['field_label'];
    
    	if($meta_key == '메타키' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
    		$html = '<div class="kboard-document-add-option-value meta-key-'.$meta_key.'"><img src="이미지주소"><span class="option-name">'.$field_name.'</span> : '.$content->option->{$meta_key}.'</div><hr>';
    	}
    
    	return $html;
    }

    위의 코드에서 $meta_key == '메타키' 부분은 실제 필드의 메타키로 적용해보세요.

    $board->id == '1' 부분은 실제 게시판 id로 적용해보세요.

    이미지주소 부분에는 실제 이미지의 주소로 적용해보세요.

     

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

    위의 코드들은 예제 코드이기 때문에 사이트에 맞게 적절히 수정해주셔야 할 듯합니다.

    고맙습니다.

  • 정말 감사하고 고맙습니다!

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기