쪼래 블로그: Wordpress

레이블이 Wordpress인 게시물을 표시합니다. 모든 게시물 표시

2014년 4월 25일 금요일

Wordpress Jetpack 모바일 테마에 adsense 달기

Wordpress를 사용하면서 Jetpack은 없어서는 안되는 플러그인 중의 하나이다.

Jetpack에서는 블로그가 모바일에 최적화 되도록 모바일 테마를 제공한다.

모바일 테마를 설정하면 간편하지만 하나의 테마이기에 원래의 블로그와 분위기가 달라지는 단점이 있다.

또 하나의 단점은 블로그에 적용시켜 놓은 광고(adsense)가 모바일 페이지에서는 적용되지 않는 다는 점!ㅠ

하지만 해당 모바일 테마의 소스에 광고 스크립트만 적용 시킨다면 이 문제는 해결된다.

파일의 위치는 아래와 같다.

/%워드프레스_설치경로%/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/header.php

해당 파일을 편집기로 열어서 <body> 태그 아래에 광고 스크립트만 넣어주면 끝!

217ㅐㅏ

<body <?php body_class(); ?>>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 광고 이름 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client=""
     data-ad-slot=""
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="wrapper">

위와 같이 적용하면 아래와 같이 모바일 페이지에서 광고가 뜨는 것을 확인할 수 있다.

[caption id="attachment_915" align="aligncenter" width="234"]

2014년 2월 21일 금요일

Wordpress에 Facebook 좋아요 버튼 달기

가끔 블로그를 돌아다니다 보면 Facebook 좋아요 버튼을 달아놓은 블로그들이 보입니다.

몇 천건, 몇 만건씩 좋아요가 눌러져 있는 것을 보면 참 부럽죠..

그래서 저도 Wordpress에 달아보았습니다!

구지 플러그인을 쓰지 않아도 원하는 페이지에 버튼을 달 수 있습니다.

물론 제가 구현을 하는 것이 아니라..

Facebook에서 API를 제공해주는 덕분이죠 ^^

Facebook 개발자 사이트에서는 여러 플러그인 및 API를 제공해 주고 있습니다.

그 중에서 좋아요 버튼을 누르는 API는 Like Button API입니다.

사용법은 간단합니다.

일단 해당 페이지(바로가기)에 접속해서 간단한 설정만 해주면 끝!

아래 그림이 설정부분입니다.

URL to Like에 본인의 블로그 주소를 넣고 Layout이나 Action Type 등을 설정하면 실시간으로 하단에 좋아요 버튼 모양을 확인할 수 있습니다.

[caption id="attachment_845" align="aligncenter" width="729"]

[ Facebook Like Button 설정 ][/caption]

Layout은 좋아요 버튼의 모양을 설정할 수 있습니다.

standard	좋아요 버튼 오른쪽으로 좋아요 숫자와 함께 긴 문장이 추가되는 layout입니다.
box_count	좋아요 버튼 위로 말풍선에 좋아요 숫자가 표시됩니다.
button_count	좋아요 버튼 오른쪽으로 말풍선에 좋아요 숫자가 표시됩니다.
button	단순히 좋아요 버튼만 있습니다.

[caption id="attachment_844" align="aligncenter" width="729"]

[ Facebook Like Button 종류 ][/caption]

Action Type은 좋아요를 할 것인지 추천을 할 것인지 설정하는 부분입니다.

Show Friends' Faces를 체크하면 좋아요를 누른 사람 중에 친구가 있으면 보여주는 기능입니다.

Include Share Button을 체크하면 공유하기 버튼도 함께 보여집니다.

[caption id="attachment_843" align="aligncenter" width="729"]

[ Facebook Like Button 타입 ][/caption]

위의 설정들을 모두 완료한 뒤 Get Code를 누르면 아래와 같이 Code가 생성됩니다.

이후에는 이러한 설정을 code에서 직접 수정해서 사용하실 수 있습니다.

[caption id="attachment_842" align="aligncenter" width="722"]

[ Facebook Like Button 스크립트 ][/caption]

코드는 총 4가지로 생성되구요. 여기서는 HTML5 코드로 생성했습니다.

XFBML도 이와 유사하게 생성되구요. IFRAME이나 URL로 생성하면 다른 플러그인을 작성하거나 사용하실 때 사용할 수 있습니다.

위에서 생성된 코드 중에 위에 있는 코드는 <body>태그 바로 아래에 추가해 주시고 아래에 있는 코드는 좋아요 버튼을 위치시킬 곳에 추가하시면 됩니다.

완료된 모습은 제 블로그 최상단을 보시면 됩니다. ^^

참~쉽죠잉~~~

* 아래에 있는 표는 코드 내에 있는 각각의 속성들을 나열한 표입니다.

추후에 직접 수정하고 싶으실 때에는 아래 내용을 참고해서 수정하시면 됩니다 ^^

Setting	HTML5 Attribute	Description	Default
`action`	`data-action`	The verb to display on the button. Can be either "like" or "recommend"	"like"
`colorscheme`	`data-colorscheme`	The color scheme used by the plugin. Can be "light" or "dark".	"light"
`href`	`data-href`	The absolute URL of the page that will be liked.	XFBML and HTML5 versions default to the current URL.
`kid_directed_site`	`data-kid-directed-site`	If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this	"false"
`layout`	`data-layout`	Selects one of the different layouts that are available for the plugin. Can be one of "standard", "button_count", or "box_count". See the FAQ for more details.	"standard"
`ref`	`data-ref`	A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details.	None
`share`	`data-share`	Specifies whether to include a share button beside the Like button. This only works with the XFBML version.	"false"
`show_faces`	`data-show-faces`	Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites.	"false"
`width`	`data-width`	The width of the plugin. The layout you choose affects the minimum and default widths you can use, pleasesee the FAQ below for more details.	Depends on layout

2013년 12월 20일 금요일

워드프레스 번역하기

워드프레스 블로그를 설치하여 운영하다가..

호스팅이 만료되면서 운영의 불편함 때문에 잠시 eXpressEngine(이하 XE)로 외도를 했다가..

게시판 형태의 커뮤니티 성격이 강한 면 때문에 다시 워드프레스로 돌아오게 되었다. lol

다시 설치를 하고 백업 받았던 자료들을 복구하고 나니..

이리저리 테마를 찾아봐도 맘에 썩 와닿는 것이 없어서 아무거나 설치하고 수정을 하기에 나섰다.

일단 예전엔 영문 버전으로 설치했던 워드프레스도 그냥 번역 버전을 설치했고..

그러다보니 마음에 들지 않게 번역해 놓은 부분들이 있어서 그냥 내 입맛대로 바꿔보기로 했다.

일단 랭귀지 파일을 찾아서 수정!

vi /wp-content/languages/ko_KR.po

아래와 같이 텍스트 형태로 되어있다.

#: wp-includes/general-template.php:2167
msgctxt "admin color scheme"
msgid "Coffee"
msgstr "커피"

자..그래 여길 수정하면 되는거군!

하면서 당당하게 수정을 하고 확인!을 했지만..변화는 없었다..

같은 이름의 다른 확장자 파일이 마음에 걸려서 열어보았으나 바이너리 파일이라 확인할 수 없었다.

vi /wp-content/languages/ko_KR.mo

젠장..이게 아닌데..OTL

그래서 다시 구글링!

역시..확장자 po 파일을 바이너리 형태로 변환해주는 과정이 필요했던 것이다..ㅠㅠ

[ 참고 URL : Translating WordPress ]

po 파일의 내용을 추가 및 삭제하고 mo 파일로 변환해 주는 툴은 위의 URL을 참고하면 몇가지 있는 것을 확인할 수 있다.

나는 오픈소스(MIT License)에 cross-platform을 지원하는 Poedit을 사용했다.

아래 그림이 Poedit 실행 화면이며 po파일을 생성 및 수정한 다음 저장하면 자동으로 mo파일이 생성된다.

이를 languages 경로에 업로드 시켜주면 번역이 적용된다.

[Poedit 메인 화면]

[Poedit PO파일 로드 화면]

2013년 1월 15일 화요일

Wordpress에 한글 웹폰트 나눔고딕 적용하기

Wordpress에서 웹폰트(나눔고딕) 적용 방법입니다.

@font-face{ 라는 사이트에 웹에서 나눔고딕 적용하는 방법이 쉽게 설명되어 있습니다.

해당 사이트에서 나눔고딕을 선택해서 <head> 부분에 추가할 script를 확인합니다.

google.load( "webfont", "1" );

google.setOnLoadCallback(function() {

WebFont.load({ custom: {

families: [ "NanumGothic" ],

urls: [ "http://fontface.kr/NanumGothic/css" ]

}});

});

</script>

Appearance -> Editor로 이동해서 테마의 Header(header.php) 파일을 오픈합니다.

위 script를 복사해서 <head> 태그 사이에 넣고 Update File를 클릭합니다.

Google WebFont Loader를 사용하기 위한 등록이 완료된 것입니다.

다음은 블로그에서 해당 폰트를 사용해서 보여줄 곳에 적용을 시키는 작업이 필요합니다.

이 작업은 Appearance -> Editor의 Stylesheet(style.css)를 오픈해서 작업합니다.

body { font-size: 12px; font-family: 'NanumGothic', 'Tahoma', 'Arial', 'Verdana'; }

저는 모든 부분에 적용시킬 것이므로 이렇게 body 안에 명시했습니다.

이렇게 해서 적용 후 확인하면 됩니다 ^^

2012년 12월 10일 월요일

Wordpress를 이용한 블로그 구축 완료!

이전부터 블로그에 대한 관심이 있어서 네이버, 다음, 구글, 티스토리 등을 통해 블로그를 생성한 적이 있었다.

하지만 꾸준히 운영을 하지 못하고 문을 닫고 말았다.

그러던 중 내 지식을 저장하고 공유하고자 다시 블로그에 관심을 가졌고..

회사에서 검토하고 있던 Wordpress를 통해 구축해 보자고 결심했다.

Wordpress는 서비스형과 구축형으로 나뉘어져 있었다.

서비스형이 편하지만 제약이 많아 구축형으로 결정을 했다.

구축형으로 결정을 하니 직접 저렴한 서버도 하나 구축하고 싶었지만..

유지 비용이 만만치 않아서 그냥 저렴한 호스팅 업체를 통해 구축하기로 했다.

결심이 선 김에 호스팅 업체를 통해 도메인까지 구입해 버렸다..

돈이 아까워서라도 망하지 않게..열심히 포스팅하고 운영해야겠다..ㅋ