Json을 활용한 Ajax response(php & javascript)

Ajax request를 받은 Server Side의 php 파일에서 필요한 처리를한 한 후 결과 값을 넘겨 줄 때 jason을 활용하는 방법 PHP $resultObj->result = "success"; $resultObj->message = "The comment has been updated successfully"; $result = json_encode($resultObj); echo $result; JavaScript var result = JSON.parse(response); if(result.result == "success") { console.log(result.message); } else { console.log(result.message); }

Custom Post Type의 목록 출력과 Pagination

Custom Post Type을 만들었을 경우, 목록 부분을 구현하는 Code // DB Query $paged = isset($_GET['paged']) ? $_GET['paged'] : 1; $query = new WP_Query( array( 'posts_per_page'=>5, 'post_type' => 'qpwb', 'paged' => $paged )); // Contents Loop while ( $query->have_posts() ) : $query->the_post(); echo '<a href="'. the_permalink() .'">' . the_title() . '</a></br>'; endwhile; echo '<hr>'; // Pagination $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ), 'format' => '?paged=%#%', 'current' =>...

플러그인(Plugin)에서 페이지 템플릿(Template) 만들기

플러그인 개발 시 Font-end 화면을 다루어야 할 경우가 있는데, 이 경우 테마의 템플릿을 사용하기 어렵다. 어렵게 사용한다고 하더라도 이용자가 테마를 변경하게 되면 무용지물이 된다. 나의 플러그인에서 필요한 템플릿을 만들고 특정 페이지 또는 포스트 호출 시 사용할 수 있는 방법이 필요한데, 이에 대해 간단히 노트한다. add_filter( 'single_template', 'my_template' ); function my_template( $single ) { global $post; /* Checks for single template by post type */ if ( $post->post_type == 'my_post_type' ) { if ( file_exists( dirname( __FILE__ ) . '/my-template.php' )...

워드프레스 사이트맵(sitemap) 오류 해결

사이트맵 플러그인을 설치하여 사이트맵을 확인할 때 다음과 같이 오류가 표시되는 경우가 있다. This page contains the following errors: error on line 3 at column 6: XML declaration allowed only at the start of the document Below is a rendering of the page up to the first error. 이 경우는 사용 중인 테마 또는 플러그인의 php 파일(대표적으로 functions.php)의 시작 부분에 공백이 있거나, 파일의 끝에 php를 closing 하는 ?> 코드가 들어 있을 경우 발생한다.

워드프레스 구텐베르크(Gutenberg) Editor의 분리자(Separator) 이슈

구텐베르크 에디터의 분리자(Separator) 블럭을 사용할 때, 에디팅화면과 Front-end 화면이 다르게 나타나는 경우가 있다. 에디터 화면 Front-end 관리자의 에디터 환경에서는 자동으로 로딩되는 css 파일(load-style.php)이 Front-end에서 로딩이 되지 않기 때문에 나타나는 현상으로 보인다. 무언가 설정을 바꿔줘야 하는 것인지 알수가 없어서 일단, 에디터에서 로딩되는 해당 CSS 부분을 Front-end의 CSS 파일(예를 들면 style.css)로 다음과 같이 복사해줌으로써 해결은 된듯 하다.(더 나은 해결책이 있으면 댓글 부탁 드립니다.) .wp-block-separator.is-style-wide{border-bottom-width:1px} .wp-block-separator.is-style-dots{background:none!important;border:none;text-align:center;max-width:none;line-height:1;height:auto} .wp-block-separator.is-style-dots:before{content:"\00b7 \00b7 \00b7";color:currentColor;font-size:20px;letter-spacing:2em;padding-left:2em;font-family:serif} .wp-block-separator{border:none;border-bottom:2px solid #8f98a1;margin-left:auto;margin-right:auto} .wp-block-separator:not(.is-style-wide):not(.is-style-dots){max-width:100px} .wp-block-separator.has-background:not(.is-style-dots){border-bottom:none;height:1px} .wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots){height:2px}

워드프레스 구텐베르크(Gutenberg) Editor의 기본 Color 변경하기

구텐베르크(Gutenberg) 에디터의 블럭 설정에 색상 지정하는 부분이 있다. 워드프레스가 제공하는 기본 색상이 제공되고, 사용자가 Color Platte로 다양한 색상을 선택할 수 있게 되어 있다. 그런데, 사용 중인 테마의 주된 색상이 있을 경우, Page 또는 Post의 Contents에도 이 테마의 주된 색상을 사용하여 일관성을 줄 필요가 있는데, 이 경우 일일이 색상값을 복사해서 붙여 넣기 해야 하는 어려움이 있다. 테마에서 주로 사용하는 색상을 Editor의 기본 색상으로 수정해 주면 이러한 어려움이 해결 될 수 있다. 기본 색상을 변경하기 위해서는 먼저 테마의 functions.php(인클루드 되는 다른 php...

워드프레스 Ajax 사용 – Front-end

앞 글에서 Admin 사이드에서의 Ajax 사용법을 알아 보았다. Front 화면에서 워드프레스의 Ajax 기능을 사용하기 위해서는, 호출하는 JavaScript가 워드프레스 코어의 Ajax action을 다루는 admin-ajax.php를 인식할 수 있게 해 주어야 한다. 이를 해결하는 가장 좋은 방법이 wp_localize_script() 함수를 이용하는 것이다.아래 예제를 보도록 하다. add_action( 'admin_enqueue_scripts', 'my_enqueue' ); function my_enqueue($hook) { wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') ); // 내가 작성한 JavaScript 파일인 my_query.js 파일을 ajax-script 이라는 핸들명으로 Enqueue 시킴 wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' )) ); //my_query.js 파일(핸들명...

워드프레스 Ajax 사용 – admin side

워드프레스 테마 또는 플러그인 개발 시 Ajax 사용은, 워드프레스 고유의 방식이 있다. admin 사이드와 Front-end 에서의 사용방식이 차이가 있는데, 이 글에서는 먼저 admin 사이드에서의 사용법을 알아 보자. Step 1. Ajax action 함수 생성 Ajax 호출 시 처리되는 로직을 다루는 php 함수를 먼저 생성해야 한다. 테마의 functions.php 파일 또는 include 되는 php 파일에 다음 샘플과 같이 함수를 만들고 action을 추가 한다. add_action( 'wp_ajax_my_action', 'my_action' ); function my_action() { $whatever = intval( $_POST['whatever'] ); $whatever += 10; echo $whatever; wp_die(); // this...

플러그인 설치 없이 함수로 조회수 증가, 표시

워드프레스 포스트의 조회수를 증가시키고, 표시하기 위해서, 별도의 플러그인을 사용하는 것이 일반적인데, 많은 플러그인 설치가 부담되는 분들은 관련 함수를 사용하여, 간단하게 구현할 수도 있다.(물론 플러그인들이 제공하는 다양한 기능은 아니지만..) 사용하는 테마의 functions.php에 관련 함수를 작성하고 필요한 곳에서 사용하면 되는데, 이를 가장 잘 설명하는 사이트가 아래 사이트로 보인다. https://www.isitwp.com/track-post-views-without-a-plugin-using-post-meta/ 다만, 여기서 소개하는 함수에는 조회수 중복을 막는 개념이 없다. 쿠키를 사용하여 조회수 중복을 막는 부분을 포함한 코드는 다음과 같다. function getPostViews($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count==''){ delete_post_meta($postID, $count_key); add_post_meta($postID,...

CSS Var() 사용 시 마이너스(Nagative) 수치 사용

CSS에 아래와 같이 마이너스 숫자를 사용하는 경우가 있다. #div1 { margin-top : -10px; } 그런데 아래와 같이 CSS Var()를 사용하여 마이너스 표시하면 이를 제대로 인식하지 못한다. #div1 { margin-top : -var(--margin-top); } 이경우는 css var()의 수식 함수인 calc을 사용해야 한다. #div1 { margin-top : calc(var(--margin-top) * -1); }