Category Archives: 워드프레스 기술지원

워드프레스 기술지원

Footer(푸터) Sticky(스티키) 만들기

안녕하세요. 이번 시간에는 Sticky 기능에 대해 알아보도록 하겠습니다.

우선 Sticky는 달라붙는/끈적끈적한 이라는 의미를 가지고있습니다. 이 의미를 부여하면 Footer Sticky는 ‘Footer 영역이 달라붙어 있다’ 겠죠?

Footer Sticky는 Footer 영역이 고정되어 있어 웹사이트의 스크롤을 올리고, 내려도 고정되어 있는 것입니다.

일반적 테마에서는 Header Sticky기능을 제공합니다. Header Sticky 기능은 스크롤을 올리고, 내려도 Header가 따라다니는 것이죠. 보통 Header에는 사이트의 로고나 메뉴들이 들어가기 때문에

사용자 입장에서는 편리한 기능이라고 할 수 있습니다.

Header Sticky 기능은 편리한 기능이고 자주 사용하는 기능인데 Footer Sticky 기능은 어디에 사용하는 것일까요?

Footer Sticky 기능은 Header Sticky 기능 보다는 사용 빈도가 적습니다.

Footer Sticky는 사이트 내에서 상담 신청을 받거나 어떠한 정보를 계속 노출해야될 때 사용합니다. 이벤트 공지나 광고같은 것들이 될 수 있겠죠?

Sticky에 관한 플러그인은 여러가지가 존재합니다. 하지만 대부분이 자신이 원하는 방법으로 커스텀하기가 어렵습니다.

Default로 사용되는 Footer영역은 꾸미기가 편리하기 때문에 Default Footer에 Sticky를 넣는 것은 효율적입니다.

 

Footer 영역을 Sticky로 만드는 방법은 어렵지 않습니다.

테마의 [사용자 정의하기] – [Custom CSS]에 다음과 같은 코드만 넣으면 됩니다.

.absolute-footer {
background: rgba(0,128,128);
bottom: 0px;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
left:0;
padding: 0px 0;
position:fixed;
font-size:16px;
width:100%; z-index:99999;
float:left;
vertical-align:middle;
margin: 0px 0 0;
opacity: 1;
font-weight: bold;
}

.absolute-footer 는 Footer영역의 클래스 명입니다. 잘 확인하고 추가해야합니다.

이렇게 추가하게되면 조금 부자연스럽게 추가가 됩니다. Footer 부분이 바로 위 영역을 잡아먹기 때문입니다.

Footer 영역만큼 하단에 빈 영역을 만들어주는 것도 자연스럽게 보이는 방법중에 하나입니다. 참고하세요 🙂

 

여기까지 Footer 영역을 Sticky로 만드는 방법이었습니다. 더 좋은 방법이 있다면 알려주세요 🙂

감사합니다.

 

 

워드프레스 언어설정, 영어만 나옴

워드프레스 언어 설정 바꾸기

워드프레스는 기본적으로 언어가 영어로 셋팅되어져 있습니다.

초기 설치시 언어를 선택할 수 있습니다.

설치시에 언어를 설정하면 되는데요.

워드프레스 언어설정, 영어만 나옴
워드프레스 언어설정, 정상 상황

 

어떤 상황에서는 영어만 나오는 경우가 있습니다.

워드프레스 언어설정, 영어만 나옴
워드프레스 언어설정, 영어만 나옴

 

이런 경우에는 wp-config.php 파일내에

아래를 추가해주세요.

define('FS_METHOD', 'direct'); 

그럼, 정상적으로 선택이 가능한 언어가 나올겁니다.

SSL인증서 적용과 플러그인의 관계

SSL인증서 적용과 플러그인의 관계

 

안녕하세요.

이번 시간에는 SSL 인증서와 여러 플러그인 간 관계에 대해 알아보도록 하겠습니다.

SSL인증서는 제작하는 웹사이트에 보안을 위해 사용하며 다음과 같은 사용목적을 가지고 있습니다.

1) 스니핑 방지(Sniffing Prevention)

2) 피싱 방지 (Phishing Prevention)

3) 데이터변조 방지 (Data Modulation Prevention)

4) 기업 신뢰도 향상 (Improved Business Confidence)

 

이번에 쇼핑몰을 제작하면서 SSL인증서를 적용하였습니다. (개인정보를 안전하게 저장·전송할 수 있는 암호화기술 등을 이용한 보안조치를 하지 않으면 벌금을 받을 수 있으니 주의하세요!)

사이트 인증서 적용에는 Really Simple SSL이라는 플러그인을 사용하였습니다. 해당 플러그인은 많은 사람이 사용하는 플러그인으로 쉽게 사이트에 인증서를 적용할 수 있습니다.

 

Continue reading

워드프레스 예약 플러그인 ! YITH WooCommerce Booking Premium

워드프레스 예약 플러그인 ! YITH 우커머스 부킹 프리미엄 플러그인

 

 

이전에 워드프레스 온라인 예약 북클리(Bookly) 부킹 플러그인 사용법에 대해 알려드렸습니다.

--> WP 예약 플러그인 Bookly (북클리)

오늘은 예약 플러그인 두 번째 시간입니다!

소개해드릴 예약 플러그인은 YITH 우커머스 부킹 프리미엄 – YITH WooCommerce Booking Premium 입니다.

YITH 우커머스 부킹 프리미엄의 가장 큰 특징은 달력에서 원하는 날짜를 선택하여 예약을 할 수 있다는 것입니다.

원하는 시작 날짜와 종료 날짜를 선택하여 예약할 수 있습니다. 또한 예약 인원, 가격, 예약 수 등 상세한 것까지 설정할 수 있습니다.

예약 인원, 가격, 예약 수는 설정한 가격에 따라 자동으로 계산되어 예약자에게 보여집니다.

해당 예약 시스템은 상품 각각에 상세 적용할 수 있어 펜션, 호텔 등의 숙박 업체 예약 또는 캠핑장 예약 등 활용 범위가 넓습니다.

 

Continue reading

[5단계 따라하기] 1시간 안에 워드프레스 홈페이지 만들기 강좌 (2019년)

워드프레스 홈페이지 만들기 방법을 찾고 있나요? 누구나 1시간 안에 홈페이지 제작하는 방법을 소개합니다!

워드프레스 홈페이지 만들기 방법을 찾고 있나요? 누구나 1시간 안에 홈페이지 제작하는 방법을 소개합니다!

 

 

반응형 홈페이지 뚝딱 따라만들기

반응형 홈페이지 뚝딱 따라 만들기

반응형 홈페이지 뚝딱 따라만들기

 

웹/모바일 모두 한번에 반응형 홈페이지 만들기

하루만에 홈페이지 제작

왕초보도 하루만에 가능한 워드프레스 홈페이지 만들기

 

하루만에 뚝딱! 홈페이지 제작

워드프레스로 가능합니다!!

개인통관고유번호 입력 필드 추가하기

안녕하세요. 오늘은 개인통관고유번호 입력 필드를 내 계정 페이지에서 입력/수정/관리하고 주문시에 자동으로

이 개인통관고유번호 값을 자동으로 불러오도록 하는 기능을 구현해보도록 하겠습니다.

최근 이런 기능이 필요한 사이트가 생겨서 개발을 직접 해봤습니다.

아시겠지만, 워드프레스는 후킹 구조로 되어 있습니다.

일단 구현해야 할 기능과 비슷한 플러그인을 찾아서 기능을 자세히 확인한 후에 없는 기능을 후킹하는 것입니다.

 

자, 기본 개념을 방향을 이해했으니, 진행해보도록 합시다.

1. 비슷한 기능을 갖는 플러그인 검색

필요한 기능을 갖는 그러니까 우커머스에 커스텀 필드를 추가할 수 있는 플러그인을 하나 찾았습니다.

찾은 플러그인은 아래의 우커머스 체크아웃 필드 에디터입니다.

이 플러그인은 우커머스에서 상품을 구매하고 결제시 추가적인 필드를 넣을 수 있는 기능을 합니다.

Checkout Field Editor for WooCommerce 

해당 플러그인을 이용하여 아래와 같이 개인통관고유부호 필드를 하나 생성했습니다.

생성된 코드는 clearance_code 입니다.

하지만, 이 새로 만든 필드를 우커머스 내 계정 페이지에 노출하는 기능을 제공하지는 못합니다.

clearance, 개인통관고유부호,빅스페이서,우커머스
clearance, 개인통관고유부호,빅스페이서,우커머스

 

2. 이제 찾은 플러그인에서 없는 기능 구현하기

이제 우커머스 내 계정 페이지에 개인통관고유부호 필드를 생성하고 저장하는 기능을 만들 차례입니다.

구현된 결과를 먼저 볼까요?

clearance, 개인통관고유부호,빅스페이서,우커머스
clearance, 개인통관고유부호,빅스페이서,우커머스

위와 같이 내 계정 페이지에 개인통관고유부호를 입력하도록 만들어 보겠습니다.

아래는 전형적인 워드프레스 후킹 방식 코드입니다.

대충 정리해보면, 1번에서 만든 새로운 필드를 내 계정 페이지에 입력 필드로 노출하고, 저장/수정할 수 있도록 했습니다.

// Add the custom field “clearance_code”
add_action( ‘woocommerce_edit_account_form’, ‘add_clearance_code_to_edit_account_form’ );
function add_clearance_code_to_edit_account_form() {
$user = wp_get_current_user();

// First Field
?>
<p class=”woocommerce-form-row woocommerce-form-row–first form-row form-row-first”>
<label for=”clearance_code”><?php _e( ‘개인통관고유부호 (13자리입니다)’, ‘woocommerce’ ); ?>
<input type=”text” class=”woocommerce-Input woocommerce-Input–text input-text” name=”clearance_code” id=”clearance_code” value=”<?php echo esc_attr( $user -> clearance_code ); ?>” />
</p>
<?php
// Second Field
?>
<div class=”clear”></div>
<?php
}

// Save the custom field ‘clearance_code’
add_action( ‘woocommerce_save_account_details’, ‘save_clearance_code_account_details’, 13, 1 );
function save_clearance_code_account_details( $user_id ) {
// For clearance_code
if( isset( $_POST[‘clearance_code’] ) )
update_user_meta( $user_id, ‘clearance_code’, sanitize_text_field( $_POST[‘clearance_code’] ) );
}

 

3. 내 계정 페이지의 개인통관고유코드를 구매 후 결제시 불러오기

이제 내 계정 페이지에서 입력한 개인통관고유코드를 구매시 불러오도록 해야겠습니다.

결과부터 보시죠.

구매시 주문 메모 다음에 개인통관고유부호를 입력할 수 있도록 만들고, 내 계정에서 입력한 값을 불러오도록 했습니다.

 

clearance, 개인통관고유부호,빅스페이서,우커머스
clearance, 개인통관고유부호,빅스페이서,우커머스

 

이제 이렇게 구현한 코드를 보시죠.

코드는 간단한데요. 워드프레스 후킹 방법이 또 쓰이죠.

상품을 구매할 때의 주문 정보를 가져오고, 이 때 내 계정내에 저장된 개인통관고유부호를 가져와서 1번에서 만든 필드에 다시 넣는 방법으로 구현되었습니다.

// Add products cutom fields as formated data in customer note
add_action(‘woocommerce_checkout_update_order_meta’, ‘after_checkout_create_order’, 20, 2);
function after_checkout_create_order( $order_id, $data ) {
$user = wp_get_current_user();
$clearance_value = $user->clearance_code;

// Get the WC_Order Object (instance)
$order = wc_get_order($order_id);
// Get customer note
$note = $order->get_customer_note();
$note = $clearance_value;
// Set the new customer note before saving
$order->set_customer_note( $note );
$order->save();
}

이상, 간단하지만 강력한 워드프레스 후킹의 진가를 살펴봤습니다.

워드프레스를 만든 창업자의 기본 미션을 잘 생각해보시면 쉽게 구현하실 수 있습니다.

 

오늘은 여기까지 입니다. 감사합니다.