안녕하세요! Jinnovator입니다.

오늘은 워드프레스에 Font Awesome을 적용시키고 활용하는 방법에 대해 알아보겠습니다.

 아래 버튼에 들어간 아이콘은 어떻게 넣었을까요?

Font Awesome은 아이콘은 "폰트"로 쓸 수 있는 것입니다. 이미지로 넣어도 되는데 왜 꼭 폰트를 사용해야 하는가에 대해 의구심을 품는 분들이 계실 것입니다.

폰트의 장점이라면?

1. 색깔, 크기를 글씨와 함께 마음대로 지정할 수 있습니다.

2. 별도의 이미지 파일이 필요 없습니다.

3. 벡터이기 때문에 확대를 해도 아이콘이 깨지지 않습니다.

 

 

이 Font Awesome은 워드프레스 뿐 아니라, 모든 웹사이트에 적용 가능합니다.

 http://fortawesome.github.io/Font-Awesome/

<Font Awesome 웹사이트>

 

현재 2015년 2월 11일 기준으로 4.3.0 버전 까지 나와있습니다. 하지만 인터넷 익스플로러 7 버전이 지원되지 않습니다.

우리 나라에서는 인터넷 익스플로러 사용율이 높기 때문에, 이 버전의 지원을 무시할 수 없죠? 그래서 IE7 지원이 가능한 3.2.1 버전을 다운로드하도록 하겠습니다.

먼저, 메인 화면의 Old 3.2.1 Docs를 클릭합니다.

빨간색 배경의 메인 화면이 뜨는군요.  

일반적인 웹사이트의 경우, 상단의 "Get Started" 메뉴를 클릭하여 css를 삽입하시면 됩니다.

CDN을 이용하여 해당 css 파일을 외부에서 불러올 수도 있고, 다운로드하여 직접 링크를 거실 수 있겠죠.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

 

워드프레스의 경우, 아래의 코드 사용하여 등록해 주세요.

아래와 enqueue_scripts 함수를 wp_enqueue_scripts에 action으로 추가합니다.

CDN을 이용하시려면 yourpath/...css 부분에 위의 주소를 넣으시면 되겠죠?

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

function enqueue_scripts() {
 global $is_IE;
  if ( $is_IE ) {
   wp_register_style( 'font-awesome-ie7', yourpath/font-awesome-ie7.min.css' );
    $GLOBALS['wp_styles']->add_data( 'font-awesome-ie7', 'conditional', 'lte IE 7' );
   wp_enqueue_style( 'font-awesome-ie7' );
  }
  wp_register_style( 'font-awesome-3.2', 'yourpath/font-awesome.min.css'  );
  wp_enqueue_style( 'font-awesome-3.2' );
}

 

 보시는 바와 같이 다양한 아이콘을 "폰트"로서 사용할 수 있습니다.  아래 보이는 아이콘 뿐 아니라, 수백가지의 다양한 아이콘을 사용할 수 있어요.

 

아이콘을 넣는 방법은 간단합니다.

<i class="icon-camera-retro"></i> 카메라

위와 같이 i 태그에 클래스명만 바꾸어서 넣어 주시면 됩니다.

잠깐, 앞에서 버튼에 아이콘을 넣었는데.. 어떻게 넣었을까요?

일반적으로 사용하는 <input> 태그의 버튼에는 넣을 수 없습니다.

 

<a href="" class="button"><i class="icon-camera-retro"></i> 버튼</a>

<button type="button"><i class="icon-camera-retro"></i> 버튼</button>

 

와 같은 식으로 넣으시면 버튼에 아이콘이 표시됩니다.

 

감사합니다!

 

 

 

자동차보험,의료,보험,대출,미용,금융,법률,부동산,중고자동차,무료듣기,건강,돈,국민임대아파트

Posted by CodeChef

댓글을 달아 주세요

아파치, Nginx 등의 서버 설정에서 인코딩이 UTF-8로 설정되어 있지 않은 경우, 한글 파일 업로드 시 업로드를 실패할 수 있습니다.

여기에서 두 가지 플러그인을 소개해 드릴테니, 입맛에 맞는 방식으로 골라서 쓰시면 될 것 같습니다.


1. 실제 파일명 DB 저장 - 저장되는 파일명 Hash

이 경우, 이미지를 다른이름으로 저장할 때 ec82aceba789-eab7b8eba6bc.jpg 와 같은 형식으로 저장됩니다.

영팔군님의 블로그에서 배포하므로 스샷과 링크 걸겠습니다!

http://082net.com/2012/1024/워드프레스에서-한글-이름-파일-업로드/



2. 초성-중성-종성을 알파벳으로 매칭하여 서버에 저장

ㄱ=> k, ㄲ=>kk .. 와 같은식으로 한글 파일명을 영어로 변환하여 업로드하는 방식입니다.

http://ssamture.net/archives/1862



자동차보험,의료,보험,대출,미용,금융,법률,부동산,중고자동차,무료듣기,건강,돈,국민임대아파트

Posted by CodeChef

댓글을 달아 주세요

워드프레스 플러그인 또는 테마를 개발하면서, Rewrite 사용 시에 permanent_link에 대한 주소 처리가 신경 쓰일 수 있습니다.

예를 들어, 현재 페이지의 URL에 &mode=write를 추가하고자 할 경우 

<?php echo $_SERVER['PHP_SELF'] ?>&mode=write

<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&mode=write

<?php echo get_permalink( $post->ID ); ?>&mode=write

<?php the_guid($id); ?>&mode=write

이런 방법들이 있겠죠. 이렇게 했을때 Permalink 세팅을 바꾸면 어떻게 될까요? Rewrite를 사용해도 해당 파라미터는 적용이 안되겠죠?

다음의 방식을 적용하면, Rewrite 사용시에도(물론  add_filter( 'page_rewrite_rules', '' ); 를 통해 rewrite rules를 수정해 줘야겠죠.), Permalink Common Setting을 변경시에도 깔끔하게 처리되며, 워드프레스 코어에 충실할 수 있습니다.


현재 파라미터에 &mode=write를 추가하라는 명령입니다.


<a href="<?=add_query_arg( 'mode', 'write'  ); ?>"><?=__('Write')?></a> 



자동차보험,의료,보험,대출,미용,금융,법률,부동산,중고자동차,무료듣기,건강,돈,국민임대아파트

Posted by CodeChef

댓글을 달아 주세요



워드프레스의 페이지에 사용자 변수를 추가하는 방법을 설명해 드립니다.

Permalink setting이 Default로 되어 있다면, 페이지 화면에서 아래의 주소가 보일 겁니다.

 http://yourwordpress.com/?page_id=87 


여기에 mode라는 변수를 넣어서 페이지에서 감지를 하고 싶어서 

"&mode=write&article=jinnovator-parameter-test" 를 붙여 보았습니다.


주소 : 

 http://localhost/wordpress/?page_id=87&mode=write&article=jinnovator-parameter-test


하지만, get_query_var( 'mode' ) 함수에서 해당 값을 불러오지를 못하네요.

$_GET을 사용하면 가져올 수 있지만, 워드프레스 코어에서 제공하는 기능을 충실히 활용하기 위해 get_query_var('') 함수에서 가져올 수 있도록 해야 합니다.

먼저, public query var 목록을 살펴보고, 중복되지 않는 파라미터명을 선정해야겠죠?


코드 : 

global $wp_query;

print_r( $wp_query->query_vars); 


결과값 : 

Array ( [page_id] => 87 [error] => [m] => [p] => 87 [post_parent] => [subpost] => [subpost_id] => [attachment] => [attachment_id] => 0 [name] => [static] => [pagename] => [second] => [minute] => [hour] => [day] => 0 [monthnum] => 0 [year] => 0 [w] => 0 [category_name] => [tag] => [cat] => [tag_id] => [author] => [author_name] => [feed] => [tb] => [paged] => 0 [comments_popup] => [meta_key] => [meta_value] => [preview] => [s] => [sentence] => [fields] => [menu_order] => [category__in] => Array ( ) [category__not_in] => Array ( ) [category__and] => Array ( ) [post__in] => Array ( ) [post__not_in] => Array ( ) [tag__in] => Array ( ) [tag__not_in] => Array ( ) [tag__and] => Array ( ) [tag_slug__in] => Array ( ) [tag_slug__and] => Array ( ) [post_parent__in] => Array ( ) [post_parent__not_in] => Array ( ) [author__in] => Array ( ) [author__not_in] => Array ( ) [ignore_sticky_posts] => [suppress_filters] => [cache_results] => 1 [update_post_term_cache] => 1 [update_post_meta_cache] => 1 [post_type] => [posts_per_page] => 10 [nopaging] => [comments_per_page] => 50 [no_found_rows] => [order] => DESC ) 


사용하고자 하는 "mode"라는 파라미터를 사용 하고 있지 않네요. 

물론, URL에 넣은 mode라는 파라미터도 가져오지 못했습니다.

이제, 워드프레스의 코어 함수에서 가져올 수 있도록 파라미터를 추가해보겠습니다.


"mode"와 "article"이라는 파라미터를 추가해 보겠습니다.


아래의 코드를 테마의 경우 functions.php 에 넣어주세요. 플러그인의 경우 호출되는 코드의 적절한 위치에 넣어 주시면 됩니다. 함수의 인자는 add_filter에서 알아서 넣기 때문에, 받은 배열에 값을 추가하고 그대로 돌려준다고 생각하시면 됩니다.

function my_add_query_vars($myVars) {

  $myVars[] = "mode";

  $myVars[] = "article";

  return $myVars;

}

add_filter('query_vars', 'my_add_query_vars'); 


여기서 다시 query_vars를 찍어 볼까요?


주소 : 

http://yourwordpress.com/?page_id=87&mode=write&article=jinnovator-parameter-test 


코드 : 

global $wp_query;

print_r( $wp_query->query_vars); 


결과값: 

Array ( [page_id] => 87 [mode] => write [article] => jinnovator-parameter-test [error] => [m] => [p] => 87 [post_parent] => [subpost] => [subpost_id] => [attachment] => [attachment_id] => 0 [name] => [static] => [pagename] => [second] => [minute] => [hour] => [day] => 0 [monthnum] => 0 [year] => 0 [w] => 0 [category_name] => [tag] => [cat] => [tag_id] => [author] => [author_name] => [feed] => [tb] => [paged] => 0 [comments_popup] => [meta_key] => [meta_value] => [preview] => [s] => [sentence] => [fields] => [menu_order] => [category__in] => Array ( ) [category__not_in] => Array ( ) [category__and] => Array ( ) [post__in] => Array ( ) [post__not_in] => Array ( ) [tag__in] => Array ( ) [tag__not_in] => Array ( ) [tag__and] => Array ( ) [tag_slug__in] => Array ( ) [tag_slug__and] => Array ( ) [post_parent__in] => Array ( ) [post_parent__not_in] => Array ( ) [author__in] => Array ( ) [author__not_in] => Array ( ) [ignore_sticky_posts] => [suppress_filters] => [cache_results] => 1 [update_post_term_cache] => 1 [update_post_meta_cache] => 1 [post_type] => [posts_per_page] => 10 [nopaging] => [comments_per_page] => 50 [no_found_rows] => [order] => DESC )  



잘 들어갔군요. 이제 테마나 플러그인 개발 시, 워드프레스 코어 함수인 get_query_var( '파라미터명' ) 을 사용하여 값을 가져 오시면 됩니다.


자동차보험,의료,보험,대출,미용,금융,법률,부동산,중고자동차,무료듣기,건강,돈,국민임대아파트

Posted by CodeChef

댓글을 달아 주세요

워드프레스에 나눔고딕(나눔글꼴) 적용하기

워드프레스를 설치하고 한글을 사용하면, 기본적으로 굴림체와 바탕체 등이 설정되어 멋진 사이트의 디자인도 보기싫게(?) 바뀌어 버리고 맙니다.

그래서 많은 웹디자이너들이 사용하는 대안 중 하나가 이쁜 웹폰트를 적용시키는 것 입니다. 네이버에서는 나눔글꼴 시리즈를 제공합니다.

이 중 나눔고딕이 웹이나 모바일에서 볼 때 가장 깔끔한 디자인과 가독성을 보여주는 것 같습니다.

이제, 워드프레스에 나눔고딕(나눔글꼴, 나눔바른고딕)을 적용하는 방법을 간단하게 소개하겠습니다. 나눔바른고딕   네이버에서 제공하는 나눔글꼴(나눔고딕, 나눔바른고딕, 나눔명조 등)

 1. Google Font Early Access 사용하기

간단하게, 구글에서 "구글 폰트 나눔고딕"을 쳐도 가장 상위에 노출됩니다. 아래 화면은 구글 폰트 Early access 입니다.

Google Font Early Access 바로가기 : http://www.google.com/fonts/earlyaccess 1

  Control+F 키를 누른 후 나눔 을 치시면 페이지의 중간 쯤에 나눔 글꼴 시리즈를 적용하는 방법이 검색됩니다. 3

이 중에 "나눔고딕" 폰트를 워드프레스에 적용시켜 보겠습니다. 노란색 박스의 Link를 복사해 둡니다.  

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

 

 2. 워드프레스에 나눔고딕(나눔글꼴) 적용하기 워드프레스 관리자 화면으로 돌아와서, 외모 - 편집기를 선택합니다. 4

편집기를 선택하면, 가장 먼저 스타일 시트 에디터가 뜹니다.

스타일시트의 상단 중 적절한 위치에(저의 경우, 주석 */이 닫히는 다음 줄) 앞에서 복사한 Link를 붙여넣은 뒤, "파일 업데이트" 버튼을 클릭합니다.

이제, 구글 폰트를 스타일시트로 불러왔으니, 적용시켜야겠죠? 다시 스타일 시트 편집기에서 아래 코드를 @import ... 뒤에 붙여넣습니다.

* { font-family: 'Nanum Gothic', 돋움, Dotum, Arial; }

이렇게 폰트를 설정하더라도, 위의 코드 아래에 새로 font-family가 적용된다면 나중에 나오는 값으로 글꼴이 바뀌어 버립니다. 그렇기 때문에, 원하는 스타일의 font-family에도 나눔고딕을 적용해야합니다.

자, 이제 마지막 단계만 남았습니다. 스타일시트를 "font-family"로 검색해서, 맨 앞에 'Nanum Gothic'을 추가해 줍니다. 6 모든 font-family를 찾아서 'Nanum Gothic'을 추가하셨으면, '파일 업데이트'를 클릭하시면 적용이 완료됩니다.    

자동차보험,의료,보험,대출,미용,금융,법률,부동산,중고자동차,무료듣기,건강,돈,국민임대아파트

Posted by CodeChef

댓글을 달아 주세요