
서문 

Legenda 테마 데모 사이트: http://8theme.com/demo/legenda/


테마 개발자 사이트: http://support.8theme.com/


워드프레스 코덱스: http://codex.wordpress.org/


우커머스 문서 사이트: http://docs.woothemes.com/documentation/plugins/woocommerce/

	
구글: https://www.google.com


베누시안 블로그: http://martian36.tistory.com/1286





1장


• 서브라임 텍스트 2: http://www.sublimetext.com/2
• 서브라임 텍스트 3: http://www.sublimetext.com/3

		
• MAMP를 사용해서 내 컴퓨터에 워드프레스 설치하기(매킨토시 컴퓨터 사용자) → http://martian36.tistory.com/1257
• 국내 무료 호스팅에 워드프레스 설치하기 → http://martian36.tistory.com/1270
• 워드프레스 다중사이트 만들기 → http://martian36.tistory.com/910


• WAMP: http://www.wampserver.com/en/
• MAMP: http://www.mamp.info/en/index.html
• LAMP: http://bitnami.org/stack/lampstack
• XAMPP: http://www.apachefriends.org/en/xampp.html


오토셋 설치

• http://autoset.net/xe/download_autoset_8_0_0


워드프레스 설치

• http://ko.wordpress.org/



자식 테마 만들기

/*
Theme Name: LEGENDA Child
Theme URI: http://8theme.com/
Author: 8theme
Author URI: http://themeforest.net/user/8theme
Description: ThemeForest Premium Theme
Version: 1.7
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
template: legenda
*/
@import url("../legenda/style.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
body, h1, h2, h3, h4, h5, h6, li, p, #nav ul li a, #topbar, input, button, select, textarea, a {
font-family: 'Nanum Gothic' !important;
font-style: normal !important;
}
/* 아래부터는 자신의 스타일시트를 입력합니다. */


<?php
function admin_css() {
wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/css/admin.css' );
}
add_action('admin_print_styles', 'admin_css');


@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
body, h1, h2, h3, h4, h5, h6, li, p {
font-family: 'Nanum Gothic' !important;
font-style: normal !important;
}



메뉴 만들기

.posttypediv div.tabs-panel {
max-height: 1400px!important;
}


[template_url]/images/assets/home1_1.png
http://localhost/wordpress/ wp-content/themes/legenda/images/assets/home1_1.png


[template_url]/images/assets/home1_2.png




2장

폰트 설정

body, h1, h2, h3, h4, h5, h6, li, p, #nav ul li a, #topbar, input, button, select, textarea, a {
font-family: 'Nanum Gothic' !important;
font-style: normal !important;
}


body, h2, h3, h4, h5, h6, li, p, #nav ul li a, #topbar, input, button, select, textarea, a {
font-family: 'Nanum Gothic' !important;
font-style: normal !important;
}


우커머스 설정

//한국 원화표시
add_filter( 'woocommerce_currencies', 'add_my_currency' );
function add_my_currency( $currencies ) {
$currencies['KRW'] = __( '대한민국', 'woocommerce' );
return $currencies;
}
add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
function add_my_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'KRW': $currency_symbol = '원'; break;
}
return $currency_symbol;
}


카드결제

https://www.eximbay.com/index.do


Merchant ID: 1849705C64
Secret Key: 289F40E6640124B2628640168C3C5464


3장 

그룹 상품

.single-product-page .product-info .price { font-size: 16px; }
.single-product-page .product-info .price ins { font-size: 16px; }
.single-product-page .product-info .product_meta del .amount { font-size: 16px; }
.single-product-page table th, table td { vertical-align: bottom; }
.single-product-page .product-info td.price { float: none; }
.group_table .quantity-box { margin: 10px 10px 0px 0; }


쿠폰 사용

.cart_totals table { float: none; }



콘텐츠 슬라이더 만들기


background-color: rgba(243, 156, 18, 0.3);
padding: 20px 20px 20px 20px;
white-space: normal !important;
width: 400px !important;
height: auto !important;


헤더 상단 바 패널 만들기


[button title="페이스북" icon="css3" url="#" style="white"] [button title="트위터"
icon="twitter" url="#" style="white"]


푸터 영역 만들기


<p>저희 회사 위치 정보입니다.</p>
<h6>위치</h6>
서울시 강남구 역삼동 829
전화: 02-1234-5789
<br><br>
<img alt="" src="[template_url]/images/assets/paypal.png" />



<div class="custom-info-block a-left"><span>팔로우:</span>
<a href="#"><i class="icon-youtube"> </i></a>
<a href="#"><i class="icon-twitter"> </i></a>
<a href="#"><i class="icon-facebook"> </i></a>
<a href="#"><i class="icon-rss"> </i></a></div>
<div class="custom-info-block a-center"><a href="#">새 상품 !</a></div>
<div class="custom-info-block a-right"><a href="#">고객센터 채팅하기 24/7 <span>채팅 지원</
span></a></div>



<img src="[template_url]/images/shop-logo-footer.png">




하단 푸터 만들기


footer .widget_nav_menu ul { border: 0px solid #e6e6e6; }
footer .widget_nav_menu li:before { left: 0px; top: 9px; }
.widget_nav_menu li a { font-size: 12px; }



언어 선택기 영역 사용


<i class="icon-phone"></i> 1688-1688 &nbsp;&nbsp;
<i class="icon-map-marker"></i> 서울시 강남구 역삼동 829

<a href="#"><i class="icon-map-marker"></i> 서울시 강남구 역삼동 829</a>




우측 패널 영역 사용


.side-area.side-block .product_list_widget a { color: #ebebeb; }



섹션 사용

.text-bg { background: rgba(255,255,255,0.5); padding:30px; border-radius: 5px }


섹션에 비디오 배경 사용


• http://8theme.com/demo/legenda/wp-content/uploads/2013/11/test4.mp4
• http://8theme.com/demo/legenda/wp-content/uploads/2013/11/test4.webm
• http://8theme.com/demo/legenda/wp-content/uploads/2013/11/test43.ogv


페이지 상단에 티저 콘텐츠 추가


<div class="custom-info-wrap">
<div class="custom-info-block a-left"><a href="#">문의 사항이 있으신가요? <span>연락주세요</span></a></div>
<div class="custom-info-block a-center"><a href="#">10만원 이상 구매 시 15% 할인!</a></div>
<div class="custom-info-block a-right"><a href="#">무료배송! <span>3만원 이상 구매 시</span></a></div>
</div>


파트너와 고객 섹션

[title subtitle="Lorem ipsum dolor sit umeb"]파트너와 고객[/title]




가격 테이블 만들기

http://8theme.com/demo/legenda/shortcodes/pricing-tables/


<div class="pricing-table columns4">
<ul>
<li class="row-title">Free</li>
<li class="row-price">$19</li>
<li>512 mb</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li><a href="#" class="button">Add to Cart</a></li>
</ul>
<ul>
<li class="row-title">Econom</li>
<li class="row-price">$29</li>
<li>1 gb</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li><a href="#" class="button">Add to Cart</a></li>
</ul>
<ul class="selected-column">
<li class="row-title">Premium</li>
<li class="row-price">$59</li>
<li>2 gb</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li><a href="#" class="button">Add to Cart</a></li>
</ul>
<ul>
<li class="row-title">Advanced</li>
<li class="row-price">$79</li>
<li>4 gb</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li><a href="#" class="button">Add to Cart</a></li>
</ul>
</div>



파이 차트 만들기

[googlechart title="Pie Chart" type="pie" labels="CSS|워드프레스|제이쿼리" data="41,32,27"
data_colours="0d32f1,f90562,0bf34c"]




이용약관 페이지 만들기


.woocommerce form .form-row.terms .input-checkbox { float: right; }
.terms a, .showcoupon, .myaccount_user a, .digital-downloads a { text-decoration: underline;
color:#ed1c2e;}



상품 카테고리 단축코드


[product_categories number="9" parent="0"]

[title align="left"]상점 카테고리[/title]




WP-Members 플러그인 사용


#wpmem_reg label.text, #wpmem_reg label.checkbox, #wpmem_reg label.select, #wpmem_login label {
padding: 19px 0 !important; margin: 0; line-height: 30px; }
#wpmem_reg .div_text, #wpmem_login .div_text { padding: 15px 0 !important; }
.div_text input { margin: 0; }
#wpmem_reg label[for="username"].text { padding: 16px 0 !important; margin: 0; }
.link-text { clear: both; }



상품 정보 옵션 추가


// 상품 추가 화면 필드 표시 액션
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_
fields' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// 이 줄 위에 코드를 입력하세요....
echo '</div>';
}



// 텍스트 필드
woocommerce_wp_text_input(
array(
'id' => 'shipping_cost',
'label' => __( '배송비', 'woocommerce' ),
'placeholder' => '금액 입력',
'desc_tip' => 'true',
'description' => __( '이곳에 배송비를 입력하세요', 'woocommerce' )
)
);


// 필드 저장 액션
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields_save( $post_id ){
// 이 줄 위에 코드를 입력하세요....
}


// 텍스트 필드
$woocommerce_text_field = $_POST['shipping_cost'];
if( !empty( $woocommerce_text_field ) )
update_post_meta( $post_id, 'shipping_cost', esc_attr( $woocommerce_text_field ) );


<p>배송비: <?php echo get_post_meta($post->ID, 'shipping_cost', true); ?>원</p>




원산지 옵션


// 국가 선택상자
woocommerce_wp_select(
array(
'id' => 'product_origin',
'label' => __( '원산지', 'woocommerce' ),
'options' => array(
'한국' => __( '한국', 'woocommerce' ),
'중국' => __( '중국', 'woocommerce' ),
'일본' => __( '일본', 'woocommerce' )
)
)
);


// 국가 선택상자
$woocommerce_select = $_POST['product_origin'];
if( !empty( $woocommerce_select ) )
update_post_meta( $post_id, 'product_origin', esc_attr( $woocommerce_select ) );



<p>배송비: <?php echo get_post_meta($post->ID, 'shipping_cost', true); ?>원</p>
<p>원산지: <?php echo get_post_meta($post->ID, 'product_origin', true); ?></p>




고정된 콘텐츠 추가


<?php get_template_part('bottom', 'content'); ?>



공사 중(Under Construction) 페이지 만들기


.admin-bar p.demo_store {top: 28px !important;display: block; }
.admin-bar .fixed-header-area.fixed-already {top: 56px;}



게시판 페이지 만들기


.kboard-poweredby { display: none; }
#kboard-avatar-editor input[type="checkbox"], #kboard-customer-editor input[type="checkbox"],
#kboard-default-editor input[type="checkbox"], #kboard-thumbnail-editor input[type="checkbox"]
{ width: 16px !important; height: 20px !important; }


































