aaa
bbb
Categories
[카테고리:] Blog
Categories
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 단축 링크”을 체크 해제하세요.
Korea SNS Pro 제품은 특정 포스트나 페이지 마다 공유버튼 노출을 선택할 수 있습니다.
포스트(페이지) 편집 화면에서 해당 옵션(메타박스)을 추가하여 설정할 수 있습니다.
설정 순서
워드프레스 데쉬보드 -> 설정 -> Korea SNS Pro 로 들어가세요.
Enable Metabox 부분에 체크 후 “Save Changes” 버튼을 클릭합니다.
글 편집화면 상단에 “화면 옵션”을 클릭하면 아래와 같은 목록이 나옵니다.
여기서 “Korea SNS Pro” 항목을 체크하세요.
그러면, 편집화면 맨 하단에 공유버튼 노출 옵션 박스가 추가됩니다.
이제 Show, Hide 로 개별 노출을 설정할 수 있습니다.
Categories
PC에서 카카오톡 공유기능 지원 – korea SNS Pro
Korea SNS Pro v1.1부터 카카오톡 공유 기능을 스마트폰 뿐만 아니라 PC, 매킨토시 에서도 사용할 수 있습니다.
아래와 같이 PC 웹브라우저에서도 카카오톡 버튼을 클릭할 수 있습니다.
카카오톡 버튼을 클릭하면 로그인 과정을 거쳐
스마트폰에서와 같이 공유할 친구를 선택하는 창이 나타납니다.
메시지를 보낼 친구를 선택한 후 하단의 “~공유하기”를 클릭 합니다.
공유 성공 메시지가 나왔습니다.
카카오톡 채팅방에서 정상적으로 메시지가 발송되었음을 확인할 수 있습니다.
http://blog.icansoft.com/product/korea-sns-pro/
Categories
Korea SNS 카카오톡 서비스 종료 안내
2018년 6월부터 korea SNS의 카카오톡 공유 기능이 작동되지 않았습니다.
확인결과 카카오 측 구버전 API 차단으로 인해
이로인해 Korea SNS의 카카오톡 공유 기능이 작동되지 않음을 확인하였습니다.
카카오스토리 공유기능은 문제없이 작동되고 있습니다.
이에 긴급 업데이트(v1.5.7)를 통해 카카오톡 버튼을 제거하였습니다.
Korea SNS Pro
Korea SNS Pro 에는 최신 API가 적용되어있어 카카오톡 버튼이 정상작동합니다.
그리고, 모바일 뿐만아니라 데스크탑PC에서도 카카오톡 공유기능을 사용할 수 있습니다.
Korea SNS Pro 구입한 분들에게는 1년간 무상 업그레이드를 지원하고 있습니다.
http://blog.icansoft.com/product/korea-sns-pro/
Korea SNS 의 쇼트코드 기능을 이용하여 글 중간에 버튼들을 삽입하면 기본적으로 좌측에 버튼들이 몰려있다.
첫 번째와 세 번째 버튼 그룹은 기본으로 포스트 상하에 추가되는 버튼이다.
두 번째 버튼 그룹은 쇼트코드로 삽입한 버튼 그룹이다.
쇼트코드 덩어리는 글자가 아니기 때문에 글 편집기에서 아무리 우측으로 정렬하려고 해도 꿈쩍도 하지 않는다.
대신 스타일 시트로 해결할 수 있는데 Korea SNS 플러그인 내부에 이미 스타일 정의가 되어있어서 클래스명을 이용하여 간단히 해결할 수 있다.
우선 글 편집기에서 쇼트코드를 작성한 후 “비주얼”->”텍스트”모드로 바꾸자. 글편집기 우측 상단에 “텍스트”를 클릭하면 된다.
“텍스트”모드에서는 html 테그 단위로 편집이 가능하다.
[ korea_sns_pro_button ] 부분을 아래와 같이 수정한다. (Korea SNS 는 [ korea_sns_button ] )
<div class="korea-sns-pos-right"></div>
그러면 아래와 같이 우측 정렬 된다.
Categories
SK 플렛폼 사이트에 적용된 Korea SNS
오늘 무심코 네이버 배너 광고를 클릭 했습니다.
그런데, 눈에 익은 아이콘 조합이 눈에 띄더군요.
바로 확인 들어갔습니다.
역시 워드프레스 사이트로 구축되었고 Korea SNS가 적용되어 있더군요.
서울시, 삼성전자 등 관공서나 대기업들도 워드프레스 쓰는데가 있다던데 Korea SNS까지 적용된 사이트를 보니 반갑더군요.
근데, 이정도 기업이면 유료제품(Pro) 쓰셔도 부담없을듯 한데요 ^^;
Categories
Korea SNS Pro 설치 매뉴얼
Korea SNS Pro는 WordPress 공식 사이트에서 다운로드 받을 수 없고 파일형태로 받아서 직접 설치해야 합니다.
플러그인 파일 압축 해제
메일 등을 통해 받은 korea-sns-pro.zip 파일의 아래와 같이 압축을 해제합니다.
플러그인 파일 업로드
압축 해제된 파일을 폴더(korea-sns-pro) 통째로 업로드 합니다.
cafe24 웹호스팅을 기준으로 /www/wp-content/plugins/ 경로안에 업로드하세요.
플러그인 활성화
“워드프레스 데쉬보드->좌측메뉴->플러그인->설치된 플러그인”을 클릭합니다.
Korea SNS Pro 아래의 “활성화”를 클릭하세요.
플러그인 세부 설정
“워드프레스 데쉬보드->좌측메뉴->설정->Korea SNS Pro”를 클릭합니다.
Active share buttons : 버튼별 사용 여부를 설정합니다.
Button Order : 버튼 순서를 조정합니다.
Show buttons in these pages : 버튼이 기본적으로 노출될 화면을 설정합니다.
Enable Metabox : 포스트와 페이지 별로 공유 버튼을 감추거나 보이게 설정하는 기능입니다.
위치 : 페이지나 포스트에서 버튼의 위치를 상,하,상+하, 좌, 우, 가운데로 설정할 수 있는 기능입니다.
Your kakao App Key : 카카오톡, 카카오스토리 버튼 작동에 필요한 앱 키를 입력합니다.
Kakaotalk Icon Title : 카카오톡 공유 시 메시지 하단의 링크 버튼의 제목을 설정합니다.
쇼트코드
- 아래 쇼트코드를 사용하면 글 도중에 공유 버튼들을 삽입할 수있습니다.
- [.korea_sns_pro_button ]
- 아래 형식으로 URL과 제목을 직접 설정할 수 있습니다.
- [.korea_sns_pro_button link=”http://yourdomain.com” title=”제목” ]
카카오 API 키 발급 받기
- 설정화면의 Your Kakao App Key 항목에 키를 입력하지 않으면 카카오톡, 카카오스토리 공유가 되지 않습니다.
- 이 키는 카카오개발자 사이트에서 웹 사이트 운영자가 직접 발급받아 입력해야 합니다.
활용 팁!
- 네이버라인은 스마트폰 내에서만 작동됩니다.
- 카카오톡 메시지 하단의 앱 아이콘을 바꿀 수 있습니다.
- 카카오톡 공유 시 – 특성이미가 설정되지 않은 포스트인 경우 내장된 기본 이미지(종이비행기 아이콘)로 공유됩니다.
- 첫 화면이 특정 페이지로 설정된 사이트인 경우 “홈”이 아닌 “페이지”로 인식됩니다. 이 때 첫 페이지에 공유버튼 노출을 안하려면 페이지 노출 체크를 해제하고 필요한 페이지만 쇼트코드를 삽입하세요.
Categories
Meta Slider로 멋진 슬라이드 배너를 넣어보자
Meta Slider는 포스트에 슬라이드 배너를 넣어주는 워드프레스 플러그인이다.
플러그인 추가 메뉴에서 무료로 설치할 수 있다.
설치, 활성화 후 Meta Slider 메뉴로 들어가면 텅 비어있다.
“Create your first slideshow”라고 적힌 +를 누르면 빈 슬라이더 하나가 생긴다.
그다음 “Add Slide”를 누르면 이미지 선택창이 나타난다.
임의로 사진 3개를 올려보았다.
각 이미지 별로 캡션, 이미지 채우기 옵션, 클릭 시 링크 등을 설정할 수 있다.
위 사진 우측 아래 “Shortcode” 항목의 metaslider id=28 부분을 대괄호를 포함해서 복사해 두자.
이제 쇼트코드를 글에 넣어보자.
짜잔~ 1분만에 슬라이드 배너가 생겼다.
이미지 배너 외에도 여러가지 방식의 슬라이드를 만들 수 있다.
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를 뒤에 로딩하여 기존에 로딩된 카카오톡 관련 기능들이 무시되어 카카오톡 버튼이 작동되지 않게된다. (카카오스토리는 정상작동한다.)
해결책
위 파일을 다운로드받아 압축을 푼 후 아래 경로에 덮어쓰면된다.
/wp-content/plugins/mangboard/plugins/sociallogin/js/
위 파일은 카카오의 Full SDK (Minified) 파일을 이름만 변경한 파일이다.
카카오톡 기능이 무시되지 않도록 기능을 추가하는 개념이므로 안심하고 사용해도 된다.
결론
동일한 라이브러리를 로딩하는 상황은 워드프레스 환경에서 빈번하다.
카카오 측에서 API의 여러 버전을 만들 때 각기 다른 클래스명을 사용하여 충돌이 없게 대비했어야하는 것이 아닌가 생각이든다.
아무튼 문제의 원인을 찾고 해결이 되는 것은 항상 즐겁다.
Categories
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/
Categories
맥에서 페러렐즈 우분투를 이용한 개발환경 구축하기
리눅스를 기반으로 하는 개발 프로젝트에서는 일반적으로 테스트 서버를 따로두어 릴리즈를 준비한다.
단순히 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
Categories
페이팔로 기부하는 방법
간혹 웹사이트들을 보면 아래와 같이 “Donate” 라는 버튼을 볼 수 있다.
기부를 요청하는 버튼인데 뭔가 큰 일이 일어날 것 같아 눌러보지도 못하는 분들도 있다.
바로 결재나 이체가 이루어지는 것은 아니니 안심해도 좋다.
주로 해외 및 국가간 송금에 “Paypal”이라는 중계 사이트를 이용한다.
일정 수수료를 부담하고 양자간의 송금이나 카드결재를 대행해주는 기업이라고 보면되겠다.
위 “Donate” 버튼을 누르면 아래와 같은 화면이 나온다.
국내 쇼핑몰에서는 ActiveX가 설치되고 팝업창이 떠서 카드번호나 안심결재를 하겠지만 그런 것은 대한민국에만 있다.
기부금액이 명시된 경우도 있고 위와같이 빈 칸으로 나와있는 경우도 있다.
이 경우 기부자가 금액을 정하면 된다.
Paypal은 아직 원화 결재 서비스가 없다. 보통 US달러로 결재한다.
아래쪽에 이것저것 개인정보를 입력한 후 “기부 검토 및 계속” 버튼을 누르면 된다.
Paypal을 자주 이용한다면 가입하여 계정을 만들어 놓는 것도 좋다.
계정이 있는 경우 우측 “로그인” 버튼을 누르면 아래와 같이 로그인 화면이 나온다.
Paypal 계정으로 로그인 하면 귀찮은 개인정보 입력 없이 바로 결재가 진행되어 편리하다.
Korea SNS 플러그인이 1.5.1로 업그레이드 되었습니다.
스마트폰에서 카카오스토리 공유버튼 클릭 시 웹 팝업창이 아닌 앱을 실행하도록 개선하였습니다.
로그인 단계가 생략되어 공유가 더 간편해 졌습니다.
웹 개발 환경을 만드는데 로컬 웹서버 만큼 부담없는 곳이 없다.
워드프레스나 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 설치
아래 링크에서 다운로드 받을 수 있다.
설치 프로그램은 따로 없고 압축파일을 풀어서 복사해야한다.
폴더명을 간단하게 수정하자.
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
페이스북에 원하는 이미지가 표시되지 않는다!
워드프레스 포스트를 페이스북에서 공유할 때 원하지 않는 이미지가 표시되는 경우가 있습니다.
- 로고가 표시되는 경우
- 대표이미지가 아닌 보조이미지가 표시되는 경우
- 이미지가 표시되지 않는 경우
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이 있는 웹서버에 접근하지 못하는 경우에 해당합니다.
웹호스팅인 경우 거의 발생하지 않습니다.
원인이 너무 많은데 필자의 경험 중 하나는 소개해 드립니다.
서버 호스팅 (가상, 클라우드, 상면)인 경우 웹서버 보안을 위해 불필요한 해외 아이피를 차단합니다,.
주로 중국을 차단하는데, 한국에서만 서비스할 목적으로 한국 이외의 아이피를 모두 차단하기도 합니다.
페이스북, 구글 등의 검색 로봇은 미국에 있는데 미국에서 한국의 웹서버에 접근하지 못하게 됩니다.
아이피를 추적해 페이스북이면 허용하는 방법도 있지만, 항상 같은 로봇(서버)만 접근하는 것도 아니고 (사실 어마어마하게 많은 로봇이 존재합니다.) 일단 차단된 결과를 가지고 수작업하는 것이라 추천하지는 않습니다.
Categories
워드프레스 이사를 간편하게 하는 방법
보통 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을 몇개 더 붙이면 됨.
Categories
맥에서 jpg로 캡처하기
맥에서 화면캡처를 할 때 주로 Cmd+Shift+4를 눌러 영역을 잡아 캡처를 한다.
고화질을 위해 png 파일로 저장이 되는데 웹에 활용도가 높은 필자는 jpg 파일을 선호한다.
웹에서 JPG가 적합한 이유
호스팅을 받아 사이트를 워드프레스로 구축하고, Goole Pagespeed Insites 에서 사이트를 분석해 보면 png 파일을 압축하면 페이지 로딩 속도를 단축할 수 있다는 것을 알 수 있다.
png파일 사이즈를 줄이는데는 jpg가 가장 적합하다.
동일한 화면을 png와 jpg로 각각 저장했을 때 용량을 비교해 보았다.
물론 이미지툴을 이용해서 png->jpg로 저장할 때 압축률(손실률)을 조정할 수 있다. 위 결과는 별도의 조정없이 osx 기본 설정상태에서 저장된 결과이다.
고작 몇 kb를 절약하기 위해 뭔가해야한다고 생각하면 오산이다.
웹 페이지 하나에 들어가는 이미지는 수십개가 될 수 있다. 또한 인터넷 환경이 무선, 3G, 무료 Wifi 라면 몇 kb로 인해 로딩이 늦고 방문객이 떠날수도 있다.
이러한 이유로 필자는 웹에 올리는 이미지로 jpg를 선호한다.
단, png 파일에는 알파채널(투명색상)이 있어 뒷 배경을 투과하는 등의 목적이라면 png를 사용해야한다. 색상수가 256컬러로도 충분하다면 gif가 용량이 더 작다.
맥 캡처 파일을 자동으로 jpg로 저장 시키기
이 방법을 알기 전에 필자는 png로 캡처하여 jpg로 보내기하는 방법을 사용하였다. 클릭 몇 번이지만 수많은 이미지를 다루다보면 여간 번거로운 일이 아니다.
우선 터미널을 실행한다.
아래 명령을 실행한다.
defaults write com.apple.screencapture type jpg
이제 바탕화면에 jpg 파일로 캡처이미지가 저장될 것이다.
다른 포멧도 가능한데 아래 처럼 필요에 따라 바꾸면 된다.
defaults write com.apple.screencapture type pdf
defaults write com.apple.screencapture type png
defaults write com.apple.screencapture type gif
defaults write com.apple.screencapture type tiff
관련 자료
캡처 저장 폴더 바꾸는 방법 http://macnews.tistory.com/3188
Categories
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
Categories
Korea SNS – 카카오링크 아이콘 바꾸기
Korea SNS 플러그인을 통해 카카오톡으로 포스트를 보내면 아래 이미지처럼 APP 라고 적힌 부분이 보인다. 이것은 실행할 앱의 아이콘인데 따로 설정하지 않으면 기본 아이콘이 노출된다.
아이콘 바꾸기
아이콘은 카카오톡 개발자 사이트에 아이콘 이미지를 업로드하여 바꿀 수 있다.
아래 링크를 통해 개발자 사이트의 앱 목록으로 이동하자.
https://developers.kakao.com/apps
로그인 안되었다면 로그인 후 아래처럼 등록한 앱 목록이 보인다.
아이콘을 바꾸고자하는 앱을 선택하면 앱 개요 화면이 나온다.
앱 정보 항목 우측에 “설정”을 클릭하자.
앱 아이콘에 “Edit”라고 나오면 된다. 이것을 클릭하면 이미지를 업로드할 수 있다.
png, jpg, gif, ico 등을 선택할 수 있다.
업로드가 제대로 되었다면 아래와 같이 앱 아이콘이 바뀐 것을 볼 수 있다.
이제 사이트에서 포스트를 공유해보자.
App 아이콘 대신 내가 올린 아이콘을 볼 수 있다.
