WordPress 비 플러그 인 사용자 정의 좋아요 기능 스타일

wordpress 좋아요 현재 많은 주제 가 글 말미 에 이 루어 진 독자 와 상호작용 하 는 기능 입 니 다. 많은 플러그 인 들 이 이 기능 을 제공 합 니 다. 만약 에 자신 이 수정 주 제 를 개발 하 는 것 을 좋아한다 면 인터넷 에서 ajax 를 통 해 실시 간 으로 좋아요 를 표시 하 는 방법 을 배 워 보 세 요.
글 AJAX 좋아요 의 기능 실현 원 리 는 사용자 정의 필드 를 통 해 좋아요 수 를 저장 하고 cookies 를 통 해 좋아요 중복 을 금지 합 니 다. WordPress 는 플러그 인 을 사용 하지 않 고 글 AJAX 좋아요 의 조작 과정 을 실현 합 니 다. 1. 아래 코드 는 템 플 릿 functions. php 파일 에 마지막 으로 추가 합 니까? >앞.

add_action('wp_ajax_nopriv_specs_zan', 'specs_zan');
add_action('wp_ajax_specs_zan', 'specs_zan');
function specs_zan(){
    global $wpdb,$post;
    $id = $_POST["um_id"];
    $action = $_POST["um_action"];
    if ( $action == 'ding'){
        $specs_raters = get_post_meta($id,'specs_zan',true);
        $expire = time() + 99999999;
        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
        setcookie('specs_zan_'.$id,$id,$expire,'/',$domain,false);
        if (!$specs_raters || !is_numeric($specs_raters)) {
            update_post_meta($id, 'specs_zan', 1);
        } 
        else {
            update_post_meta($id, 'specs_zan', ($specs_raters + 1));
        }
        echo get_post_meta($id,'specs_zan',true);
    } 
    die;
}

2. 아래 JS 코드 를 템 플 릿 의 footer. php 에 추가 하거나 테마의 header. php 파일 앞 에 다음 코드 를 추가 합 니 다.

$(document).ready(function() { 
	$.fn.postLike = function() {
		if ($(this).hasClass('done')) {
			alert('       ');
			return false;
		} else {
			$(this).addClass('done');
			var id = $(this).data("id"),
			action = $(this).data('action'),
			rateHolder = $(this).children('.count');
			var ajax_data = {
				action: "bigfa_like",
				um_id: id,
				um_action: action
			};
			$.post("<?php bloginfo('url');?>/wp-admin/admin-ajax.php", ajax_data, function(data) {
				$(rateHolder).html(data);
			});
			return false;
		}
	};
	$(document).on("click", ".favorite", function() {
		$(this).postLike();
	});
}); 

3. 현재 테마의 single. php 파일 의 코드 아래 에 좋아요 버튼 호출 코드 를 추가 합 니 다.

	좋아 하 다.
ID,'bigfa_ding',true) ){            
echo get_post_meta($post->ID,'bigfa_ding',true);
} else {
echo '0';
}
?>
 

4. 현재 테마의 style. css 파일 에 클릭 단추 스타일 을 추가 합 니 다 (참고 만 가능).

.post-like{text-align:center;padding:10px}
.post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
.post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;} 
.post-like a.done{cursor:not-allowed}

표 시 된 스타일 을 변경 하려 면 이상 의 css 스타일 을 수정 하 십시오.주: 1.10 이상 버 전의 jQuery 를 참조 해 야 합 니 다.
관심 있 을 만 한 글:
▪ Php + JSon + Ajax + jQuery 새로 고침 없 음 비동기 팝 업 층 로그 인 튜 토리 얼 (원본 첨부)
▪ 워드 프레스 단일 페이지 는 분류 형식 으로 글 목록 을 표시 합 니 다.
▪ wordpress 업그레이드 가 진행 중 입 니 다.
▪ Wordpress 메뉴 를 Bootstrap 메뉴 스타일 로 바 꿉 니 다.
▪ 비 플러그 인 은 자동 으로 WordPress 키워드 에 링크 를 추가 합 니 다.
▪ Bootstrap 을 이용 하여 응답 식 Wordpress 테마 구축 (1)
▪ WordPress 사이트 등록 면제 호스트
▪ wordpress 는 register post type 함 수 를 사용 하여 사용자 정의 문장 형식 을 만 듭 니 다:
▪ wordpress 를 아 리 운 ECS 에서 로 컬 로 이식 하 다
▪ 워드 프레스 글 을 여 는 댓 글 을 일괄 닫 습 니 다.