[카테고리:] Wordpress

Korea SNS Pro 와 젯팩 충돌문제 해결하기

Korea SNS 는 잘 작동하는데 Korea SNS Pro 설치 후 공유가 제대로 되지않는 경우 아래 내용을 확인하시기 바랍니다.

원인

사이트에 젯팩이 설치되어 있고 wp.me 단축링크가 활성화 된 경우 공유 기능이 작동하지 않습니다.

Pro 버전에는 한글주소 오류를 원천적으로 해결하기위해 워드프레스의 짧은 오리지널 주소(domain.com/?p=123..)를 이용하여 공유하고 있습니다.
그런데, 젯팩의 단축링크 기능이 활성화된 경우 we.me/GEXR4R 과 같은 주소로 리다이렉션 처리가 됩니다.
리다이렉션의 경우 소셜사이트에서 공유 인식이 대부분 되지 않습니다.

해결방법 1

젯팩 자체를 비활성화하면 해결되지만, 젯팩 기능이 필요한 경우

젯팩 설정에서 “WP.me 단축 링크” 체크를 해제하면 해결됩니다.

단, 젯팩 최신버전(6.0 이상)인 경우 설정에서 해당 옵션을 찾을 수 없습니다. -> 해결방법 2 참조

선택의 여지가 없이 강제로 활성화되는 옵션이 많음에도 설정에서 변경할 수 없게 막았습니다.

이 부분은 상술로 보여 집니다.

해결방법 2

다행히 구버전의 설정 주소로 접근이 가능합니다.

아래 주소로 세부 설정 페이지로 진입할 수 있습니다.

http[s]://domain.com/wp-admin/admin.php?page=jetpack_modules

여러 옵션 중에 “소셜” 항목에 “WP.me 단축 링크”을 체크 해제하세요.

Blog Wordpress

Korea SNS Pro 포스트별 노출 설정 하기

Korea SNS Pro 제품은 특정 포스트나 페이지 마다 공유버튼 노출을 선택할 수 있습니다.

포스트(페이지) 편집 화면에서 해당 옵션(메타박스)을 추가하여 설정할 수 있습니다.

설정 순서

워드프레스 데쉬보드 -> 설정 -> Korea SNS Pro 로 들어가세요.

Enable Metabox 부분에 체크 후 “Save Changes” 버튼을 클릭합니다.

글 편집화면 상단에 “화면 옵션”을 클릭하면 아래와 같은 목록이 나옵니다.

여기서 “Korea SNS Pro” 항목을 체크하세요.

그러면, 편집화면 맨 하단에 공유버튼 노출 옵션 박스가 추가됩니다.

이제 Show, Hide 로 개별 노출을 설정할 수 있습니다.

Blog Wordpress

Korea SNS 쇼트코드 버튼을 우측 정렬 시키기

Korea SNS 의 쇼트코드 기능을 이용하여 글 중간에 버튼들을 삽입하면 기본적으로 좌측에 버튼들이 몰려있다.

첫 번째와 세 번째 버튼 그룹은 기본으로 포스트 상하에 추가되는 버튼이다.

두 번째 버튼 그룹은 쇼트코드로 삽입한 버튼 그룹이다.

쇼트코드 덩어리는 글자가 아니기 때문에 글 편집기에서 아무리 우측으로 정렬하려고 해도 꿈쩍도 하지 않는다.

대신 스타일 시트로 해결할 수 있는데 Korea SNS 플러그인 내부에 이미 스타일 정의가 되어있어서 클래스명을 이용하여 간단히 해결할 수 있다.

우선 글 편집기에서 쇼트코드를 작성한 후 “비주얼”->”텍스트”모드로 바꾸자. 글편집기 우측 상단에 “텍스트”를 클릭하면 된다.

“텍스트”모드에서는 html 테그 단위로 편집이 가능하다.

[ korea_sns_pro_button ] 부분을 아래와 같이 수정한다. (Korea SNS 는 [ korea_sns_button ] )

<div class="korea-sns-pos-right">

						
</div>

그러면 아래와 같이 우측 정렬 된다.

Tags buton, korea sns, plugin, sns, wordpress, 워드프레스, 플러그인

Wordpress

SK 플렛폼 사이트에 적용된 Korea SNS

오늘 무심코 네이버 배너 광고를 클릭 했습니다.

그런데, 눈에 익은 아이콘 조합이 눈에 띄더군요.

바로 확인 들어갔습니다.

역시 워드프레스 사이트로 구축되었고 Korea SNS가 적용되어 있더군요.

서울시, 삼성전자 등 관공서나 대기업들도 워드프레스 쓰는데가 있다던데 Korea SNS까지 적용된 사이트를 보니 반갑더군요.

근데, 이정도 기업이면 유료제품(Pro) 쓰셔도 부담없을듯 한데요 ^^;

Tags korea sns, sk, skflatform, 워드프레스

Wordpress

Meta Slider로 멋진 슬라이드 배너를 넣어보자

Meta Slider는 포스트에 슬라이드 배너를 넣어주는 워드프레스 플러그인이다.

플러그인 추가 메뉴에서 무료로 설치할 수 있다.

설치, 활성화 후 Meta Slider 메뉴로 들어가면 텅 비어있다.

“Create your first slideshow”라고 적힌 +를 누르면 빈 슬라이더 하나가 생긴다.

그다음 “Add Slide”를 누르면 이미지 선택창이 나타난다.

임의로 사진 3개를 올려보았다.

각 이미지 별로 캡션, 이미지 채우기 옵션, 클릭 시 링크 등을 설정할 수 있다.

위 사진 우측 아래 “Shortcode” 항목의 metaslider id=28 부분을 대괄호를 포함해서 복사해 두자.

이제 쇼트코드를 글에 넣어보자.

짜잔~ 1분만에 슬라이드 배너가 생겼다.

이미지 배너 외에도 여러가지 방식의 슬라이드를 만들 수 있다.

Tags meta-slider, plugin, slider, wordprss, 워드프레스, 플러그인

Blog Wordpress

Korea SNS-망보드 충돌 문제와 해결 방법

korea sns pro 사용 고객 중 한분이 오류 제보를 해주셔서 소스코드 분석에 들어갔다.

여러 플러그인들을 비활성화 시키면서 테스트한 결과 망보드(비즈니즈 버전) 활성화 상태에서만 korea sns pro의 카카오톡 버튼이 작동되지 않음을 확인하였다.

고객이 직접 망보드에 문의 후 아래와 같은 답변을 받았다. (전달 받은 내용이므로 사실과 다를 수 있음)

“카카오 라이브러리를 두 플러그인에서 모두 로딩하고 초기화도 함께하고 있으니 korea sns 쪽의 소스코드를 수정해야한다”

참고로 망보드의 소셜로그인 부분에 카카오톡 라이브러리가 사용되고 있다.

이에 위와 같이 수정해 보았으나 해결되지 않았다.

오류의 원인

문제는 카카오 라이브러리에 있었다.

페이지 로딩 시 아래와 같이 두번의 카카오 라이브러리 로딩이 있다.

Korea SNS에서 로딩하는 라이브러리는 카카오 서버에서 직접 받는다.

< script type='text/javascript' src='https://developers.kakao.com/sdk/js/kakao.min.js?ver=4.5.1'>< /script>

망보드에서 로딩하는 라이브러리는 플러그인 폴더에 저장되어있다.

< script type='text/javascript' src='http://blog.icansoft.com/wp-content/plugins/mangboard/plugins/sociallogin/js/kakao.story.min.js?ver=4.5.1'>< /script>

카카오 서버에서 반드시 직접 로딩해야하는 것은 아니다. 장단점이 존재한다.

그런데 두 파일명을 비교해 보면 차이가 있다.

kakao.min.js kakao.story.min.js

스크립트 로딩 특성 상 라이브러리가 중복로딩되면(내부에 동일한 클래스명이 존재하면) 앞에 로딩된 스크립트는 무시된다. (재정의 되므로)

두 파일의 차이는 아래와 같다.

kakao.min.js – Full SDK (Minified) 카카오의 모든 라이브러리 (카카오톡 + 카카오스토리 +..)

kakao.story.min.js – KakaoStory Only SDK (Minified) 카카오스토리만 포함된 라이브러리

kakao.story.min.js를 뒤에 로딩하여 기존에 로딩된 카카오톡 관련 기능들이 무시되어 카카오톡 버튼이 작동되지 않게된다. (카카오스토리는 정상작동한다.)

해결책

kakao.story.min.js

위 파일을 다운로드받아 압축을 푼 후 아래 경로에 덮어쓰면된다.

/wp-content/plugins/mangboard/plugins/sociallogin/js/

위 파일은 카카오의 Full SDK (Minified) 파일을 이름만 변경한 파일이다.

카카오톡 기능이 무시되지 않도록 기능을 추가하는 개념이므로 안심하고 사용해도 된다.

결론

동일한 라이브러리를 로딩하는 상황은 워드프레스 환경에서 빈번하다.

카카오 측에서 API의 여러 버전을 만들 때 각기 다른 클래스명을 사용하여 충돌이 없게 대비했어야하는 것이 아닌가 생각이든다.

아무튼 문제의 원인을 찾고 해결이 되는 것은 항상 즐겁다.

Tags korea sns, mangboard, plugin, wordpress, 망보드, 워드프레스

Development Wordpress

Korea SNS를 위젯에 추가하는 방법

Korea SNS는 기본적으로 포스트나 페이지 또는 요약글 위아래에 배치된다.

글 주변이 아닌 헤더 상단이나 맨 하단 등에 위치하려면 PHP 소스코드를 수정해야 하는데 개발자가 아닌 경우 어려움이 많다.

위젯에 쇼트코드를 사용하여 Korea SNS 버튼을 추가하는 방법을 정리하였다.

설명에 사용된 테마는 기본 포함 테마인 Twenty Sixteen 이다. 다른 테마도 위젯이 있는 경우 응용할 수 있다.

우측 사이드바 최상단에 공유 버튼을 추가해 보려고 한다.

위젯에 쇼트코드 허용하기

아래는 위젯 설정 화면이다. 데쉬보드->외모->위젯에 위치해 있다.

“텍스트” 아이템을 사이드바 그룹 “검색” 바로 위로 드래그앤 드롭 해보자.

컨텐트 항목에 아래 처럼 쇼트코드를 추가하고 저장하기를 누른다.

브라우저에서 확인해보면 버튼이 보이지 않고 텍스트가 그대로 노출된 것을 볼 수 있다.

위젯에 기본으로 쇼트코드가 허용되어있지 않기 때문이다.

위젯에 쇼트코드를 허용하려면 테마의 function.php 파일을 조금 수정해야한다.

보통 function 파일의 경로는 아래와 같다.

/wp-content/themes/테마폴더/function.php

function.php 맨 하단에 아래 코드를 추가하자.

add_filter('widget_text', 'do_shortcode');

다시 브라우저에서 사이트를 확인해보면 버튼이 나타날 것이다.

추가된 버튼을 눌러보면 현재 포스트 주소를 공유하는 것을 확인할 수 있다.

특정 URL 지정하기

위젯에 추가된 쇼트코드는 강제로 삽입하는 방식이라 일부 상황에서 문제가 있다.

Korea SNS 버튼이 특정 포스트나 페이지에서 보여질 때 해당 URL을 가리키고 있지만,

검색 결과나 카테고리 목록 등 여러 글이 표시될 경우 마지막 글을 가리킨다.

현재 글이 아닌 사이트 자체를 공유하고 싶은 경우에는 쇼트코드 확장 기능이 포함된 Korea SNS Pro로 가능하다.

Korea SNS Pro로 업그레이드 하기

http://blog.icansoft.com/product/korea-sns-pro/

Tags korea sns, share, sns, wordprss, 워드프레스, 웹서비스, 플러그인

Blog Development MAC Story Wordpress

맥에서 페러렐즈 우분투를 이용한 개발환경 구축하기

리눅스를 기반으로 하는 개발 프로젝트에서는 일반적으로 테스트 서버를 따로두어 릴리즈를 준비한다.

단순히 APM이나 기본 리눅스 환경이 필요하다면 테스트 서버 하나만으로도 충분할 것이다.

그런데, 리눅스의 튜닝 테스트가 필요하다면 리눅스 설치 무한 반복이라는 복병이 기다리고 있다.

튜닝 과정에서 시험삼아 프레임워크를 설치하거나 버전업한 후 다시 다운그레이드를 하다보면 OS 상태가 이상하게 꼬이기도 한다. 결국 테스트 서버를 다시 구축하는 상황까지 이르게 된다.

OSX 터미널로 리눅스와 유사한 환경을 만들 수 있으나, 완전히 동일하지는 못하다. (참고 : OSX 웹개발 환경 준비하기)

페러렐즈를 통해 우분투를 설치하여 부담없는 개발 환경을 구축하는 과정을 정리해 보았다.

페러렐즈에서 우분투 설치하기

페러렐즈 실행 후 파일->새로만들기를 하면 아래와 같은 화면이 나온다.

무료 시스템 3번째 항목에 “Ubuntu 다운로드”를 클릭해보자.

우분투 설치파일을 다운로드한다. 용량이 2.3G가량된다.

위 메뉴의 우분투는 데스크탑 버전이다. 서버 버전이 필요하다면 우분투 사이트에서 다운로드 받아 이미지로 설치하면 되겠다.

설치까지 단번에 완료된다.

최초 로그인 과정에서 parallels 계정이 주어지고 암호를 설정할 수 있다.

최초 로그인하면 페러렐즈 툴이 자동실행된다. 관리자권한이 필요하여 비밀번호를 요구하는 창이 뜬다. 방금 설정한 암호를 넣어주자.

페러렐즈 툴 설치 후 재부팅을 요구한다. 재부팅까지 완료하고 재로그인하여 바탕화면까지 나왔다.

고정 아이피 설정하기

현재 상태로를 단순히 가상 OS로서의 우분투이다. 테스트 서버 처럼 외부에서 접속하여 뭔가를 하지 못한다. 물론 우분투 콘솔이 편한 유저라면 그대로 가상 OS 화면에서 바로 개발하면 된다.

맥 환경에서 개발을 하려면 SSH, FTP, Apache, … 등 여러가지 서버를 설치하고 외부접속 환경을 만들어 줘야한다.

페러렐즈 가상OS 기본 설정에서는 “네트워크 공유”로 되어있다.

다시말해 인터넷공유기 처럼 가상+유동 IP를 이용하여 OS별로 네트워크로 연결되어있다.

테스트 서버라면 최소한 고정IP여야 한다. 매번 아이피를 확인하는 것은 매우 번거로울 것이다.

우분투 화면 좌측 System Settings를 클릭한 후 Network 아이콘을 누르면 아래와 같은 화면이 나온다.

IPv4 Address 항목을 보면 10.211.55.6 이라고 되어있다.

DHCP를 통해 자동으로 부여받은 아이피이므로 다음 부팅 때 다른 아이피가 부여될 수도 있다.

Options를 누르고 IPv4 Settings 탭을 눌러보자.

Method 항목 Automatic 을 Manual 로 변경한 후 Addresses 우측의 Add를 누르자.

한줄이 생기고 입력할 수 있는 상태가 된다.

아래처럼 Address, Netmask, Gateway, DNS를 설정해 주자.

필자는 아이피 끝 번호를 100으로 설정하였다.

물론 이론상으로 가상OS 를 99개 띄우면 충돌날 수도 있다. CPU 코어가 그렇게 많다면 가능하겠다. 이 또한 눈에거슬린다면 페러렐즈 상의 모든 가상 OS를 고정 아이피로 설정하면 된다.

외부 접속 환경 만들기

아이피 설정까지 마쳤지만 외부에서 접속가능한 상태는 아니다.

터미널 접속이 가능하려면 ssh를 설치해야한다.

웹 개발을 한다면 FTP, APM 등을 설치해야할 것이다.

그 전에 설치모듈 업그레이드가 필요하다. ssh든 뭐든 설치파일이 필요하다. 우분투에서는 apt-get 이라는 유틸리티로 설치 및 의존성 관리를 한다.

먼저 우분투 좌측 메뉴 첫번째 로고를 클릭하고 검색창에 Terminal 이라고 입력하자. t만 입력해도 terminal 아이콘이 보일 것이다. 클릭해서 실행하자.

아래 명령을 입력하고 엔터키를 누르자.

$ sudo apt-get upgrade

설치모듈이 저장된 서버( 기본값 ubuntu.com)에서 최신 설치모듈을 다운로드받고, 현재 설치된 프로그램들을 업그레이드한다. 보안상 업그레이드에 신경써야하나 내 PC안에 가상OS이니 필요할 때만 하자.

openssh 를 설치하자.

$ sudo apt-get install openssh-server

설치가 완료되었다면 맥의 터미널을 실행하여 접속을 시도해보자.

$ ssh parallels@10.211.55.100

접속에 성공했다면 아래와 같은 화면이 나왔을 것이다.

나머지 개발 환경은 프로젝트에 맞게 준비하면 되겠다.

주로 사용하는 설치 명령어들을 정리하였다.

# FTP

$ sudo apt-get install vsftpd

# 아파치 웹서버

$ sudo apt-get install -y apache2

# PHP

$ sudo apt-get install -y php5 php5-gd php5-mysql

# MySQL

$ sudo apt-get install -y mysql-server mysql-client

# PHP My Admin

sudo apt-get install -y phpmyadmin

우분투 기본 설치 관련 명령어 모음을 참고

http://blog.naver.com/kimsreal/220504976380

가상 OS 백업하기

우분투 내에서 백업툴을 구동할 수도 있으나 가상 OS특성상 가상본 파일을 그대로 백업하면 끝!

어느정도 기본 설치가 끝났다고 생각되면 가상OS파일을 따로 복사해두자.

페러렐즈 가상OS파일은 기본으로 아래 경로에 생성된다.

계정폴더/도큐먼트/Parallels

Tags apm, mac, parallels, ubuntu

Blog Wordpress

Korea SNS v1.5.1 업그레이드

Korea SNS 플러그인이 1.5.1로 업그레이드 되었습니다.

스마트폰에서 카카오스토리 공유버튼 클릭 시 웹 팝업창이 아닌 앱을 실행하도록 개선하였습니다.

로그인 단계가 생략되어 공유가 더 간편해 졌습니다.

Tags korea sns, plugin, wordpress

Blog Wordpress

맥에서 MySQL + Phpmyadmin 설치하기

웹 개발 환경을 만드는데 로컬 웹서버 만큼 부담없는 곳이 없다.

워드프레스나 PHP 프로젝트를 준비할 때 아래 구성이 기본이라 하겠다.

Apache + PHP + MySQL + Phpmyadmin

Apache + PHP 설치는 아래 포스트에 정리되어있다.

http://blog.icansoft.com/blog/mac/mac-apache-php-run/‎

이후 내용은 Apache, PHP가 설치된 상태를 기준으로 설명하였다.

MySQL 다운로드

아래 링크에서 다운로드 받을 수 있다.

http://dev.mysql.com/downloads/mysql/

요세미티, 엘캐피탄인 경우 가장 최신으로 다운로드 받자.

메버릭인 경우 맨 아래 것을 다운로드 받아야한다.

다운로드 받을 때 Oracle 계정을 요구한다. 계정이 없다면 만들어 두자.

MySQL 설치

dmg 파일을 실행하자.

계속 진행하면 맨 마지막에 아래와 같은 팝업이 뜬다.

하이라이트된 부분이 root 계정 초기 패스워드다. 메모하거나 캡처해 두자. (!중요)

리눅스와 다르게 기본 root패스워드가 무작위로 생성되고 여기서만 알려주므로 꼭 외워두자.

시스템 환경설정에서 MySQL 서버를 시작/종료할 수 있다.

“Start MySQL Server” 버튼을 눌러 서버를 작동시키자.

아래 체크박스가 켜져있으면 시스템 구동 시 자동으로 시작한다.

MySQL 루트 초기 패스워드 변경하기

터미널에서 아래 순서대로 실행한다.

$ sudo /usr/local/mysql/bin/mysql -u root -p'설치완료 때의 패스워드'

mysql> SET password='새패스워드';

Query OK, 0 rows affected (0.00 sec)

mysql> quit

Phpmyadmin 설치

아래 링크에서 다운로드 받을 수 있다.

http://www.phpmyadmin.net

설치 프로그램은 따로 없고 압축파일을 풀어서 복사해야한다.

폴더명을 간단하게 수정하자.

phpMyAdmin-4.5.4.1-all-languages —> phpmyadmin

폴더를 웹서버 도큐먼트 루트로 옮기자.

보통 “/Users/계정이름/Sites”일 것이다.

phpmyadmin 폴더에서 아래 파일명을 변경한다.

config.sample.inc.php -> config.inc.php

config.inc.php 파일을 열어 아래 내용데로 수정한다.

$cfg[‘blowfish_secret’] ='cookie';

웹브라우저를 열어 아래 주소로 들어가보자.

http://localhost/~계정이름/phpmyadmin

수정한 패스워드를 입력하면 데시보드가 나타난다.

로그인이 안되고 #2002 오류가 발생한다면 터미널에서 아래 순서로 실행하자.

$ sudo mkdir /var/mysql

$ sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

Tags mac, mtsql, phpmyadmin

Blog Wordpress

워드프레스 페이스북 공유 시 다른 이미지가 나오는 문제 해결

Post author By kimsreal
Post date 2016년 2월 2일
워드프레스 페이스북 공유 시 다른 이미지가 나오는 문제 해결에 댓글 없음

페이스북에 원하는 이미지가 표시되지 않는다!

워드프레스 포스트를 페이스북에서 공유할 때 원하지 않는 이미지가 표시되는 경우가 있습니다.

로고가 표시되는 경우
대표이미지가 아닌 보조이미지가 표시되는 경우
이미지가 표시되지 않는 경우

Korea SNS 플러그인의 facebook 공유 버튼은 이미지, 제목, 요약글 지정에 관여하지 않습니다.
단순히 URL을 facebook 서버에 전달하는 역할만 합니다.
이것은 페이스북 사이트에서 URL을 붙여넣기 할 때의 방식과 동일합니다.

페이스북 공유 처리 매커니즘

이런 문제를 해결하려면 우선 페이스북 공유 처리 방식부터 알아야 합니다.

URL을 facebook 입력창에 입력하면
facebook서버의 검색로봇이 해당 URL로 접속을 시도해서 html을 읽어들입니다.
html을 분석하여 적당한 이미지와 제목, 요약글을 찾아냅니다.
찾은 결과를 facebook 인덱스서버에 저장 해둡니다.
URL아래에 인덱스서버에 저장된 결과를 표시해줍니다.

“적당한 이미지”는 어떻게 판단할까요?

다음은 페이스북 URL 공유 시도 화면입니다.

페이스북 서버가 미리 계획된 정책을 바탕으로 대표이미지, 타이틀, 요약글 등을 표시합니다.

html에 메타테그가 존재하는지 확인한다.
메타테그가 존재한다면 해당 정보를 우선으로 이용한다.
메타테그가 없거나 메타정보가 불완전하다면
html 내의 title, body, content, … 등의 일반적이 테그를 분석하여 정보를 찾습니다.
이마저도 없다면 첫 이미지(주로 로고)와 첫 구절을 이용하여 정보를 요약합니다.
URL 접근 오류가 발생했다면 Page not found 라고 나옵니다.

위 코드는 meta테그 정보가 포함된 icansoft.com 내의 html 소스코드입니다.

적용된 테마는 직접 개발하였고, 개발 과정에서 meta 테크 정보를 포스트 타이틀, 요약글, 특성이미지를 이용하여 표시하였습니다.

이런 작업을 통해 검색로봇이 사이트의 정보를 제대로 가져가도록 유도할 수 있는데,

검색엔진(소셜사이트)에 친화적으로 사이트를 최적화 하는 작업을 SEO(Search Engine Optimization) 이라고 합니다.

SEO 기능이 없는 테마는 어떻게 하나요?

SEO 기능을 테마에서 구현할 수도 있지만, 더 전문적으로 도와주는 플러그인들이 많습니다.

대표적인 플러그인이 “All in One SEO” 입니다.

https://wordpress.org/plugins/all-in-one-seo-pack/

meta 테그 생성 포멧을 설정하고, frontpage의 meta 테그도 따로 설정할 수 있습니다.

이 외에도 다양한 기능의 SEO 플러그인들이 계속 등장하고 있으니 비교해서 적용해보시기 바랍니다.

플러그인 적용 후에도 이미지가 바뀌지 않는다면?

공유 매커니즘에서 검색 로봇이 찾은 결과를 인덱스 서버에 저장합니다.

이미 한번 저장된 URL은 특별한 경우가 아니면 업데이트 되지 않습니다. 캐쉬 서버 처럼 한번 저장해서 계속 우려먹는 것이지요.

하지만 방법이 있습니다.

Facebook Debugger 사이트에서 메타 수집 상황을 열람하고 갱신할 수 있습니다.

https://developers.facebook.com/tools/debug/

Input URL에 포스트 주소를 입력하고, “Fetch new scrape information”을 클릭합니다.

아래 메타 정보가 업데이트되는 것을 확인하실 수 있을 것입니다.

Page not found 가 나온다면

검색 로봇이 URL이 있는 웹서버에 접근하지 못하는 경우에 해당합니다.

웹호스팅인 경우 거의 발생하지 않습니다.

원인이 너무 많은데 필자의 경험 중 하나는 소개해 드립니다.

서버 호스팅 (가상, 클라우드, 상면)인 경우 웹서버 보안을 위해 불필요한 해외 아이피를 차단합니다,.

주로 중국을 차단하는데, 한국에서만 서비스할 목적으로 한국 이외의 아이피를 모두 차단하기도 합니다.

페이스북, 구글 등의 검색 로봇은 미국에 있는데 미국에서 한국의 웹서버에 접근하지 못하게 됩니다.

아이피를 추적해 페이스북이면 허용하는 방법도 있지만, 항상 같은 로봇(서버)만 접근하는 것도 아니고 (사실 어마어마하게 많은 로봇이 존재합니다.) 일단 차단된 결과를 가지고 수작업하는 것이라 추천하지는 않습니다.

Tags facebook, korea sns, share

Wordpress

워드프레스 이사를 간편하게 하는 방법

워드프레스 사이트를 오래 운영하다보면 호스팅을 이전하거나 상황에 따라 클린 설치를 해야하는 경우가 생긴다.

보통 DB와 파일들을 백업하여 다시 덮어씌우는 방식을 사용한다. 이렇게 진행할 경우 오류나 사용하지 않는 스팸 데이터까지 그대로 복원되어 사이트를 느리게 만드는 원인이 되기도 한다.

이번에 소개할 “All-in-One WP Migration”은 이러한 백업-복원을 손쉽게 그리고 깔끔하게 도와주는 솔루션이다.

https://wordpress.org/plugins/all-in-one-wp-migration/

설치하기

플러그인을 설치하면 좌측 메뉴에 플러그인 이름이 보인다.

Export, Import, Backups 3개의 하위 메뉴로 구성되어있는데 이사를 할 것이므로,

Export와 Import를 사용한다.

처음 진입하면 폴더 권한에 문제가 있다는 오류가 나올 수 있다.

2가지 추가 작업이 필요하다.

임시폴더 만들기 : wp-content/plugins/all-in-one-wp-migration 안에 storage 폴더를 생성해주고 권한을 777로 설정한다.
백업폴더 만들기 : wp-content 밑에 migrationai1wm-backups 폴더를 만들고 권한을 777로 설정한다.

내용 자동 수정 기능

Export 메뉴로 들어가면 위 이미지와 같이 내보내기 과정에서 DB 내용 중 바꾸고자 하는 텍스트를 입력할 수 있다.

가령 글 내용 중에 “네이버”가 나오면 “다음”으로 고쳐서 내보내기 작업을 할 수 있다.

옮겨가는 사이트명이 바뀐다거나 하는 이슈가 있을 때 유용하다.

추가 옵션 설정

“Advanced options”를 클릭하면 아래와 같이 7개의 옵션이 나온다.

오래된 사이트를 클린 설치한다면 위 설정을 추천한다.

스팸 답글과 수정된 글의 백업본을 제거하고, 테마, 플러그인도 제외시킨다.

온전히 데이터만 백업하겠다는 것이다.

테마, 플러그인은 새 사이트에서 직접 설치해주는 것이 더 안전하다.

내보내기

“EXPORT TO” 를 클릭하면 아래와 같이 5개의 선택사항이 나온다.

제일 간편한 “FILE”을 선택하자.

내보내기 작업이 시작되면 아래와 같이 팝업이 나온다.

70Mb 가량의 데이터를 내보내기 하는데 1분 가량 소요되었다. 용량과 시스템 사양에 따라 시간은 차이가 날 것이다.

다운로드된 파일명은 아래와 같다.

가져오기

import 메뉴로 들어가면 아래와 같은 화면이 나온다.

“IMPORT FROM” 버튼을 누르고 “FILE”을 선택하면 파일 선택 박스가 나타난다.

이전에 다운로드 받았던 ~.wpress 파일을 선택하자.

프로그래스 바가 지나가고 완료 메시지가 나오면 완료된 것이다.

주의사항

가져오기를 진행하면 이전 데이터와 워드프레스 설정 정보도 함께 복원된다.
포스트의 이미지가 깨지는 경우가 있다.
- 미디어 이미지 파일명에 한글이 포함된 경우 일부 한글 일부가 사라지는 것이 원인이다.
- 필자의 경우 “스크린샷-2015-10-03-오후-4.27.45.jpg” -> “-2015-10-03-오후-4.27.45.jpg” 처럼 “스크린샷” 부분이 사라졌었다.
- 모든 파일이 다 그런 것은 아니라서 파일을 찾아 이름을 고쳐주거나 Upload 폴더는 따로 백업-복사하는 방법을 써야한다.
데이터가 512Mb 이상인 경우 유료 결제를 유도한다는 나온다면
- 플러그인 파일 중 constants.php 파일 내에 아래 문구를 찾는다.
- filedefine( ‘AI1WM_MAX_FILE_SIZE’, 536870912 );
- 536870912 부분의 숫자를 더 큰 숫자로 만든다. 0을 몇개 더 붙이면 됨.

Tags migration, plugin, wordpress

Wordpress

Korea SNS로 워드프레스 – 네이버 블로그 공유하기

Korea SNS 1.5 버전부터 네이버 블로그 공유가 가능해 졌습니다.

예전에는 “워드프레스 네이버블로그 공유”로 검색하면 주인장이 포스트를 두곳에 동시 게시하는 기능이 나왔는데 이제는 방문자가 자신의 블로그로 워프 사이트의 글을 공유할 수 있게 되었습니다.

먼저 PC에서 공유하면 아래와 같이 로그인을 요구합니다.

로그인하면 덧글을 적고 카테고리를 선택할 수 있는 창이 나옵니다.

제목은 포스트 제목과 사이트명이 기본으로 들어갑니다. 물론 수정할 수 있습니다.

대표 이미지가 안나오는 경우도 있습니다. 이미지 주소를 확인해보니 아래와 같습니다.

http://dthumb.phinf.naver.net/?src=%22http://blog.icansoft.com/…%A6-2015-06-15-%BF%C4-6.12.07.png%22&type=f560_336

빨간 글자는 실제 이미지 경로이고 나머지는 네이버 웹서버 주소입니다.

이미지를 가져와 네이버 서버에 저장하는 방식인데 이미지에 따라 인식이 잘 안되는 경우도 있습니다.

공유 후에는 이미지가 잘 보이니 걱정하지 마세요.

모바일 환경에서는 이미지가 정상적으로 나옵니다.

글쓰기를 클릭하면 글이 저장되고 블로그에 게시됩니다. 따로 팝업이나 확인창은 안나오네요.

블로그에 게시되면 아래와 같이 나옵니다.

덧글은 링크박스 아래쪽에 나오는군요.

공유 결과를 자세히 보려면 여기로.. -> http://blog.naver.com/kimsreal/220487814585

Development Wordpress

카카오톡 웹 공유를 위한 API 키 발급 받기

카카오톡 오픈 API 정책으로 2014년 12월부터 구 버전 API가 차단되었다.

최신 API를 사용하려면 “카카오톡 개발자 사이트(Kakao Developer)“에 API 키를 발급받아야 한다. 네이버 오픈 API와 비슷하다고 보면 되겠다.

웹용 API 키 발급 절차

1. 개발자 사이트 접속 – 로그인

2. 앱 생성

3. 도메인 등록

1. 개발자 사이트 접속 – 로그인

“카카오톡 개발자 사이트(Kakao Developer)“에 접속하면 우측 상단에 로그인 버튼이 보인다.

로그인 계정은 카톡 가입할 때 사용한 이메일 주소와 비밀번호이다. 카카오톡 PC버전에 접속할 때도 사용한다.

잘 모르겠다면 스마트폰 카톡 앱 설정에서 계정을 확인하면 된다.

2. 앱 생성

로그인하면 “내 애플리케이션” 화면이 나타난다.

좌측에 “앱 만들기” 버튼을 누른다.

앱 이름을 하나 지어주자. 아무거나 적되 이왕이면 영어로 띄어쓰기 없이 적자.

이 포스트에서는 “test1” 이라는 앱을 만들었다.

앱을 만들면 4개의 키를 사용할 수 있다.

여러 키 중에 웹 페이지에서 사용할 수 있는 javascript 키가 보인다. 나중에 메뉴에서 다시 확인할 수 있다.

3. 도메인 등록

웹용 javascript 키는 도메인을 등록하고 해당 도메인 내에서만 작동이 된다.

이전 화면 하단에 “설정”을 누르면 아래 화면이 나온다.

하단에 “플렛폼 추가”를 누른다.

웹에서 사용할 예정이므로 “웹”을 선택하고 도메인을 적어준다.

하단 “추가”버튼을 누른다.

“저장되었습니다”라고 나오면 끝!

메인도메인을 적더라도 서브도메인 ???.mydomain.com에서 작동되지는 않는 것 같다.

사용할 서브도메인이 있다면 모두 적어주자.

네이버 처럼 *.mydomain.com 으로 모든 서브도메인을 포함하는 지는 모르겠다. 나중에 테스트해봐야겠다.

이제 javascript 키를 가지고 등록된 도메인 내에서 카톡 API를 사용할 수 있게되었다.

앱 키 당 하루 3만 건의 전송 처리만 가능하다. 그 이상은 제휴를 통해서 가능하다고 함.

Wordpress

TinyMCE ?

워드프레스에 적용된 글편집기 입니다. 브라우저 호환성과 완성도가 뛰어난 웹용 위지윅 편집기 입니다.

워드프레스 글편집기 툴바에 ? 물음표를 클릭하면 아래와 같은 팝업창이 나옵니다.

TinyMCE 라는 이름이 나오는데 Moxicode Systems AB 라는 회사 이름이 나오네요.

워드프레스에는 3.5.8 버전이 적용되었는데, 현재 4.0 버전이 올라와 있습니다. 아래 사이트에서 확인할 수 있습니다.

http://www.tinymce.com

TinyMCE를 설치하고 웹페이지를 만들어 편집기를 띄워보는 것까지 진행하겠습니다.

설치하기

아래 페이지에서 최신 버전을 다운로드 받으세요.

http://www.tinymce.com/download/download.php

압축을 풀어보면 아래와 같은 구조로 되어있습니다.

FTP로 웹 루트에 압축을 풀어놓습니다.

웹 페이지에 적용하기

간단히 웹페이지를 만들고 아래 소스를 넣으세요.

<html>
<head>
<script type=”text/javascript” src=”/tinymce/js/tinymce/tinymce.min.js“></script>
</head>
<body>

<script type=”text/javascript”>
tinymce.init({
selector: “textarea”
});
</script>

<form method=”post”>
<textarea></textarea>
</form>

</body>
</html>

head 부분에서 tinymce.min.js 파일을 링크 걸었습니다.

아래 tinymce.init으로 초기화하는데 selector 부분에”textarea”가 있습니다.

textarea를 tinyMCE 스타일로 만들어 주겠다는 것입니다.

웹페이지에서 확인하면 아래와 같이 짜~잔 하고 나옵니다.

최신 버전이라 현재 워드프레스 화면과는 차이가 납니다.

한글 언어팩 설치하기

상단 메뉴를 한글로 바꾸려면 언어팩이 필요합니다. 아래 페이지에서 한글 언어팩을 다운로드 받으세요.

http://www.tinymce.com/i18n/index.php

아래와 같이 “Korean” 항목이 있습니다.

다운로드 후 압축을 풀면 ko_KR.js 라는 파일이 있습니다.

이 파일을 /tinymce/js/tinymce/langs/ 폴더에 넣으세요.

아래와 같이 초기화 스크립트에 언어 정보를 넣으세요.

<script type=”text/javascript”>
tinymce.init({
selector: “textarea”,
language : ‘ko_KR’
});
</script>

웹페이지에서 보면 상단 메뉴가 한글로 바뀐 것을 확인하실 수 있습니다.

글 내용 수정 기능 구현하기

PHP를 예제로 작성하면 아래와 같습니다.

<form action=”update.php” method=”post”>
<textarea id=”contents”><?php echo $contents; ?></textarea>
<input type=”button” value=”submit”>
</form>

폼 작성 방법은 자료가 많으니 생략합니다.

정리

여러 사이트에서 글을 남길 때 복사-붙여넣기가 잘 안되거나 내가 원하는 방식으로 보여지지 않을 때마다 워드프레스 글편집기가 생각났는데 이렇게 쉽게 가져다 쓸 수 있는 오픈소스인지 몰랐습니다.
이 외에도 알려진 여러 편집기가 있으나 tinyMCE 가 성능, 안전성, 비용? 면에서 우수한 것 같습니다. 워드프레스를 사용하지 않고 글 작성 기능을 구현할 때 유용할 것 같습니다.

Tags thema, TinyMCE, wordpress, 워드프레스, 위지윅

Wordpress

아마존 EC2에 워드프레스 설치하기

이전글 : 아마존 EC2 서비스 구축하기

이전글에 이어 아마존 EC2 상에 APM을 설치하고, 워드프레스 셋팅하는 과정을 정리하였습니다.

여러 자료들을 보니 yum 유틸로 설치하는 방법들이 나와있었으나 ubuntu를 설치해서인가? 아니면 툴이 바뀌었는지 리눅스에 대해서는 초보라 헤매다가 외국 사이트에서 apt-get으로 설치하는걸 따라했습니다.

1. APM설치하기

우선 sudo su로 root 계정 획득합니다. 이 후 아래 명령어로 기본 유틸을 설치합니다.

sudo apt-get install
sudo apt-get update

아래 명령어로 설치할 항목을 고릅니다. (캡처를 안해뒀네요… ^^;)

sudo tasksel

목록이 나오면 방향키로 APM에 커서를 두고 스페이스 바를 누릅니다.

모두 설치되고 프롬프트가 나오면 자동으로 웹서버가 가동됩니다.

브라우저에 주소를 넣어서 확인하세요.

연결이 안되면 EC2 설정에서 포트 설정을 확인해 보세요. 80포트가 열려있어야 합니다.

2. phpMyAdmin 설치하기

그 다음 phpMyAdmin을 설치합니다.

sudo apt-get install phpmyadmin

브라우저에서 아래 주소를 입력하여 phpMyAdmin이 제대로 뜨는지 확인합니다.

http://아이피주소/phpmyadmin

아이디는 root를 입력하고, 비밀번호는 phpMyAdmin 설치 도중에 입력했던 것을 넣으세요.

Database 하나를 추가합니다. 저는 ” wordpress”라는 DB를 만들었습니다.

3. 워드프레스 설치하기

FTP로 워드프레스 파일을 올립니다.

그런데, 웹루트는 var/www 인데 여긴 root 계정으로 접근해야 하더군요.

그래서 웹루트는 /home/ubuntu/www 로 수정해 보았습니다.

웹 환경파일을 vi에디터로 불러옵니다.

sudo vi /etc/apache2/sites-enabled/000-default

var/www로 된 두 경로를 아래와 같이 수정합니다.

w!로 저장 후 빠져나온 후 아파치를 재구동합니다.

sudo /etc/init.d/apache2 restart

이 후 작업은 다른 자료가 많으니 간단히 설명하겠습니다.

생성된 DB명과 계정 정보 wp-config.php 수정합니다.

웹브라우저에서 아래 주소를 입력합니다.

http://아이피주소/wp-admin

설치가 완료되면 웹브라우저로 사이트에 접속해 봅니다.

http://아이피주소/

참고자료

http://www.robotmedia.net/2011/04/how-to-create-an-amazon-ec2-instance-with-apache-php-and-mysql-lamp/

Tags Amazone, EC2, IT, wordpress, 워드프레스, 웹서비스

Wordpress

워드프레스 테마 제작 5 – 카테고리에 따라 사이드바 조정하기

Post author By kimsreal
Post date 2013년 5월 20일
워드프레스 테마 제작 5 – 카테고리에 따라 사이드바 조정하기에 댓글 없음

내 블로그에 접속하는 사람들은 어떤 루트로 들어올까?

대부분은 검색이나 링크를 통해 들어올 것입니다.

그렇다면 특정 글로 바로 들어올 테고, 더 신경써서 만든 첫 페이지를 보지 않을 수도 있다는 것이지요.

다른 연관된 글들도 소개해 주고 싶은데 이러한 기능을 사이드바에서 주로 합니다.

최근글, 최근 덧글… 등을 통해 해당 글만 보러 온 접속자에게 부가 정보를 제공하지요.

블로그 안에는 여러 카테고리의 글들이 있을텐데, 가령 제 블로그를 기준으로 설명드리자면…

IT 관련 글을 보러 왔는데 사이드바에 식물 관련 글이 노출된다면 연관성이 낮아집니다.

어떤 글을 보느냐에 따라 관련 카테고리 최신 글들을 노출한다면 더 좋겠지요.

1. 현재 글의 카테고리 정보 얻기

아래와 같이 single.php 등에서 카테고리 아이디를 가져올 수 있습니다.

$category = get_the_category();echo $category[0]->cat_ID;

2. 카테고리에 따른 예외처리

$category = get_the_category();

if( $category[0]->cat_ID == 1 ){ /* A */ }

else { /* B */ }

3. 멀티 사이드바 구성

위 소스코드를 가지고 카테고리에 따라 다른 사이드바를 가져올 계획입니다.

이를 위해 멀티 사이드바를 구성해야겠지요.

function.php에 “register_sidebar()” 대신 아래 코드를 넣습니다.

register_sidebars(3); /* 사이드 바를 3개 만듭니다. */

그러면, 데쉬보드->외모->위젯에 여러개의 사이드 바가 나타납니다.
카테고리 개수 만큼 사이드 바를 구성하고 각 사이드바에는 일반 최근 글이 아닌 “RSS” 글목록을 추가합니다.
RSS 피드 URL 구조는 아래와 같습니다.

http://도메인/?feed=rss2&cat=카테고리번호

4. 카테고리에 따른 사이드바 출력

아래 코드는 카테고리 코드가 1일 때 2번 사이드바를 출력하고,

카테고리가 2,3,4 일 때 3번 카테고리 출력,

그 외에는 기본적으로 1번 사이드바를 출력합니다.

<?php
$category = get_the_category();if( $category[0]->cat_ID == 1){ $sidebarID = 2; }
else if( $category[0]->cat_ID == 2 ||
$category[0]->cat_ID == 3 ||
$category[0]->cat_ID == 4 ){ $sidebarID = 3; }
else{ $sidebarID = 1; }
?><div class=”sidebar-box”>
<?php dynamic_sidebar($sidebarID); ?>
</div>

Tags thema, wordpress, 워드프레스

Wordpress

워드프레스 테마제작 3 – 뎃글 달기

워드프레스 뎃글은 크게 “뎃글 목록” 과 “뎃글 입력폼”으로 구성됩니다.

콘텐츠 하단에 뎃글을 보이려면 콘텐츠 하단에 아래 코드를 추가합니다.

코멘트(뎃글)을 위해 comments.php 를 호출하겠다는 뜻입니다.

comments.php에는 아래 코드를 넣습니다.

<?php wp_list_comments(); ?>
<?php comment_form(); ?>

뎃글 목록과 뎃글 폼을 보이겠다는 것입니다.

어째 좀 모양이 촌스럽죠?

일단 스타일 적용이 안된 형태로 위와 같이 출력되었습니다.

워드프레스에서 기본으로 제공하는 뎃글 코드이므로 스타일 클래스명을 확인하여 스타일을 적용하면 됩니다.

이러한 방법 외에 더 상세한 API를 동원할 수 있습니다.

이 경우 뎃글과 답글과의 상하 관계, 수십개의 뎃글이 있을 때 페이지 처리 등 많은 부분을 직접 구현해야 합니다.

Tags thema, wordpress, 워드프레스, 플러그인

Wordpress

워드프레스 플러그인 공유하기

직접 만든 테마나 플러그인을 전세계 네티즌들과 공유할 수 있다면 멋질 것입니다.

Wordprss.org 사이트에 플러그인을 올리는 방법을 정리해 보았습니다.

아래 페이지에서도 설명이 나와있습니다.

http://wordpress.org/extend/plugins/about/

전체적으로 아래와 같은 순서로 진행됩니다.

플러그인 만들기 -> WordPress에 승인 요청 -> 승인(메일로 결과 받음) -> 플러그인 서버에 업로드 (SVN)

1. 플러그인 형식에 맞게 편집하기

1) 플러그인 소스코드 상단에 아래와 같이 플러그인 기본정보와 라이선스 정보를 넣습니다.

<?php
/*
Plugin Name: Kakao Talk Link
Plugin URI: http://blog.icansoft.com
Description: Send Contents Link to Kakao Talk App
Author: Jongmyoung.Kim
Version: 1.0
Author URI: http://blog.icansoft.com/
License: GPL2
*/

/* Copyright 2013 Jongmyoung.Kim (email : yourmail@gmail.com)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

2) Readme.txt 파일을 만듦니다.

승인 거부가 가장 많이 되는 부분입니다.

아래 링크를 참고하여 형식에 맞는 Readme.txt 를 만드세요.

http://wordpress.org/extend/plugins/about/readme.txt

입력 폼을 제공하는 툴도 있습니다.
http://tools.trepmal.com/wp-readme-generator/

플러그인 등록 과정에서 별도 포멧을 제공하지 않고 Readme.txt 파일의 내용만을 파싱해서 제공하고 있습니다. 따라서 이 파일이 형식에 맞지 않다는 것은 제공자/사용자용 DB 표준을 따르지 않은 것과 동일하므로 반드시 형식을 지켜야 합니다.

3) 스크린샷 이미지를 만듦니다.

파일명은 screenshot.png 로 저장하세요.

4) 폴더를 통째로 압축합니다.

plugin.php, readme.txt, screenshot.png 파일을 압축파일로 만듦니다.

5) 검수 의뢰용 다운로드 링크를 만듦니다.

검수를 의뢰하려면 어딘가 다운로드 받을 곳에 올려두어야 합니다.

검수 과정에서는 wordpress.org에서 공간을 제공하지 않습니다.

2. Wordpress.org 에 승인 요청하기

사이트 계정으로 로그인 한 후 Plugins -> Developer Center -> Add Your Plugin 로 들어갑니다.

1) 플러그인 제목을 입력합니다.

2) 상세 설명을 적습니다.

3) 검수자가 플러그인을 확인하기 위해 다운로드 받을 URL을 적습니다.

4) 모두 작성한 후 Send Post 버튼을 누릅니다.

5) 기다립니다. (2~3일 소요)

3. 승인 결과 확인

형식과 기능에 문제가 없다면 아래와 같은 승인 완료 메일이 옵니다.

Jongmyoung Kim,
Your plugin hosting request has been approved.
Within one hour, you will have access to your SVN repository at
http://plugins.svn.wordpress.org/kakao-talk-link/
with your WordPress.org/bbPress.org username and password (the same one you use on the forums).
Here’s some handy links to help you get started.
Using Subversion with the WordPress Plugins Directory
http://wordpress.org/extend/plugins/about/svn/
FAQ about the WordPress Plugins Directory
http://wordpress.org/extend/plugins/about/faq/
WordPress Plugins Directory readme.txt standard
http://wordpress.org/extend/plugins/about/readme.txt
readme.txt validator:
http://wordpress.org/extend/plugins/about/validator/
Enjoy!