반응형
검색 엔진 최적화는 워드프레스에 중요한 이슈 중의 하나입니다. 워드프레스의 검색 엔진 최적화를 이해하려면 먼저 검색 엔진에 대한 지식이 어느 정도 필요합니다.

검색 엔진과 포탈의 싸움


야후, 코리아닷컴, 파란 이 세 단어의 공통점은 한때 국내 인터넷 포털 서비스 시장에 진출했다가 어느 순간에 역사 속으로 사라진 서비스라는 점입니다.
구글이 처음으로 검색 서비스를 시작할 즈음에는 야후와 구글은 비교의 대상 자체가 되지 않았습니다. 그만큼 제리양이 설립한 야후의 위상은 구글이 감히 범접할 수 없을 정도였고 당시 전세계 인터넷 포탈과 검색 시장에 막강한 영향력을 행사했습니다. 그렇지만 야후는 실적 악화로 2012년12월31일부로 야후 코리아 서비스를 종료하게 되었습니다.

야후와 다르게 구글은 현재 안드로이드OS 및 스마트폰에서부터 세계적인 군사로봇 회사인 보스턴 다이나믹스, 각종 헬스 관련 회사등 다양한 인수합병을 통해서 손대지 않는 분야가 없을 정도로 많은 사업을 하는 글로벌회사로 성장했습니다.

구글은 단 하나로 시작했습니다. 그리고 단순한 것 같은 단 하나에만 사활을 걸었습니다. 단 하는 바로 검색 엔진이었습니다. 야후는 검색으로 시작했지만 포탈 성향이 강한 서비스에 주력한 반면에 구글은 검색 엔진만을 고집했습니다. 두 회사의 정책과 성향은 웹사이트의 대문에 해당하는 사이트 홈에 가면 쉽게 이해가 됩니다.

현재 국내에서는 사업을 종료했지만 야후는 아직까지 미국에서는 서비스를 하고 있습니다. 아래 화면과 같이 야후는 검색보다는 포탈 성향이 강한 서비스입니다.

[ 포탈 성향이 강한 야후 서비스 ]



그렇지만 구글은 다릅니다. 구글은 자신들의 대문을 여러가지 포탈 서비스나 뉴스로 도배하지 않았습니다. A4지 같은 빈 백지같은 화면에 단지 검색만 하게 만들어 놓았을 뿐입니다.


[ 검색에 가치를 두는 구글 서비스 ]



물론 구글이 뉴스서비스나 기타 다른 서비스를 제공하고 있지 않는 것은 아닙니다. 아래 그림에서와 같이 구글은 뉴스 서비스를 제공합니다. 구글에서 뉴스로 검색하면 구글 뉴스를 찾아갈 수 있습니다.






구글은 검색을 통해서 자신의 서비스에 연결하도록 하거나 또는 구글에 로그인한 유저에게 자신들의 서비스를 들어갈수 있도록 메뉴를 구성해놓았습니다. 단, 맨 처음 대문은 검색이라는 점입니다.


국내에서는 아직까지 포탈 성향이 강한 네이버의 아성이 높습니다. 그렇지만 검색을 무기로한 구글과의 경쟁구도에서 앞으로 얼마만큼 잘 버텨낼지는 미지수입니다.



검색 엔진이란?


검색 엔진에 대해서 위키피디아는 이렇게 정의합니다.

웹 검색 엔진이란 웹 사이트를 검색하기 위한 프로그램이다. 어떤 검색 엔진들은 FTP 서버나 웹 사이트의 파일 검색 결과를 포함하며, 이미지나 토렌트 파일 또는 특정 부류의 웹사이트에 특화된 웹 검색 엔진도 있다.

웹 검색 엔진은 대개 웹 서비스로 이용할 수 있다. 서버에서는 로봇(robot)이라 불리는 특별한 프로그램을 이용해 웹 사이트들을 돌아다니며 웹 사이트들에 대한 정보를 미리 자동적으로 수집한다. 이후 검색 엔진 사이트에서 특정 검색어를 입력하면 검색 엔진이 수집한 정보 중 그에 맞는 결과를 볼 수 있다.

검색 엔진의 시작은 회사 내부 데이터베이스를 검색하기 위해서 시작이 되었지만, 현재 일반적으로 검색 엔진이라 부르는 것은 구글과 같은 웹 검색엔진을 지칭하는 경우가 많습니다. 


구글 검색 엔진


구글 검색 엔진은 검색 로봇이 전 세계 인터넷 웹사이트를 돌아다니면서 크롤링(crawling)하고 색인(indexing)하는 과정을 거칩니다. 크롤링하고 색인하는 것은 로봇이 스스로 웹콘텐츠를 읽고 수집해서 자신이 필요할 때 꺼내쓸수 있도록 분류와 링크로 잘 정리해 놓는 것을 말합니다. 로봇은 수집한 정보를 자신의 데이터베이스에 저장하면서 동시에 수집한 정보나 페이지에 하이퍼링크 되어있는 페이지를 거미줄과 같이 찾아서 다시 데이터베이스에 저장하게 됩니다. 수집한 한 개의 페이지에 10개의 링크가 있을 수 있고 각 링크 페이지안에 또 다른 링크가 있으면 연결된 페이지들을 찾아서 함께 색인하게 됩니다.


구글 검색엔진 최적화


워드프레스의 검색 엔진 최적화를 이야기 할 때 검색 엔진은 네이버를 지칭하지 않습니다. 워드프레스의 태생이 외국에서 만들어지다보니 워드프레스에서 검색 엔진 최적화 이슈를 이야기할 때는 구글 검색 엔진을 이야기합니다. 그리고 워드프레스 자체가 구글 검색엔진에 최적화 되도록 설계되어 만들어졌습니다. 또한 대부분의 유무료 최적화 플러그인들도 구글의 최적화 정책을 가지고 만들어진 프로그램들입니다.

워드프레스의 이점 중의 하나는 사용자가 단지 워드프레스 CMS를 사용해서 웹사이트를 만드는 것만으로도 구글 검색엔진에 어느 정도 최적화된 상태의 콘텐츠를 생성할 수 있다는 것입니다. 바로 이것이 워드프레스가 전세계 CMS 시장의 마켓 쉐어를 58.5%를 석권한 이유의 하나가 되기도 합니다. 그리고 최적화에 부족한 부분이 있다면 제대로된 플러그인과 콘텐츠 작성 기법만 소화하면 자신의 사이트가 구글 검색에서 상위 노출되는 경험을 할 수 있습니다.








구글은 검색엔진 최적화에 고민하는 사람들을 위해서 Google 검색 엔진 최적화 기본 가이드를 제작해서 배포하고 있습니다. 이것은 구글 검색엔진 최적화를 생각하고 있는 유저라면 반드시 읽어보아야 하는 필수 문서입니다.


반응형
반응형
자식 테마의 구조를 이해하였다면 자식 테마 제작시 플러그인을 활용하는 것이 좋습니다. 플러그인을 활용하면 자식 테마를 만들때 필요한 파일들을 자동으로 생성해주기 때문에 편리하게 이용할 수 있습니다.
자식 테마 제작 플러그인으로 많이 사용하는 것은 One-Click Child Theme 플러그인 입니다.

One-Click Child Theme 플러그인 설치하기


관리자 화면의 왼쪽 사이드바 메뉴에서 플러그인 추가하기 메뉴를 클릭합니다.



플러그인 검색필드에서 child theme을 입력하고 검색을 합니다. 여러가지 플러그인이 있지만 아래 오렌지색 박스 부분에 6만명 이상이 설치한 One-Click Child Theme 플러그인을 설치할 것입니다. 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭해서 설치를 완료합니다.



One-Click Child Theme 플러그인으로 자식테마 생성하기


자식 테마를 만들기 전에 현재 서버에 설치된 테마의 현황을 확인하겠습니다. 서버나 자신의 로컬 PC에 워드프레스가 설치된 디렉토리로 이동합니다. 저의 경우 아래 그림처럼 서버에 5개의 테마가 설치된 것을 확인할 수 있습니다.



현재 테마의 설치 현황을 확인하였으니 이제 플러그인을 통해서 자식 테마를 생성해보겠습니다. 왼쪽 사이드바 메뉴에서 외모를 클릭하면 Child Theme 라는 서브 메뉴가 생성된 것을 확인할 수 있습니다. Child Theme을 클릭합니다.



자식 테마를 만들수 있는 화면이 나타납니다. 아래와 같이 테마의 이름과 설명, 테마 제작자를 입력하고 Create Child 버튼을 클릭합니다.


Create Child 버튼을 클릭하면 자동으로 Shuman Child Theme 자식테마가 생성되고 화면이 외모 > 테마 화면으로 이동하면서 테마가 활성화 됩니다. 이때 자식 테마가 생성되는 기준은 직전에 활성화 되어있는 테마가 됩니다. 플러그인은 직전 테마를 부모로 삼아 자동으로 자식 테마를 만들어냅니다.



자식테마 생성 확인하기


이제 자식 테마가 정상적으로 생성되었는지 확인해야 합니다. 정상 생성여부를 확인하기 위해서 다시 워드프레스가 설치된 디렉토리 폴더로 이동합니다.

서버에 접속하니 아래 화면과 같이 /wp-content/themes/shuman-child-theme 라는 자식 테마폴더가 생성된 것을 확인할 수 있습니다. 그리고 폴더 안엔는 총 4개의 화일이 자동 생성 된것을 알 수 있습니다. 이제 필요하다면 자동 생성된 화일을 열어서 테마를 수정 작업하면 됩니다. 이렇게 플러그인을 활용하면 자식 테마를 간편하게 만들어 낼 수 있습니다.





반응형
반응형

자식 테마란 무엇인가?


자식 테마(Child Theme)은 말 그대로 부모 테마(Parent Theme)을 상속받은 테마를 이야기 합니다. 부모 테마는 우리가 테마라고 부르는 바로 그 테마 원본 화일을 이야기합니다. 이해하기 쉽게 표현하면 자식 테마는 부모 테마를 상속받고 추가적인 설정 및 세팅 값을 가지고 있는 테마를 말합니다.

자식 테마가 중요한 이유는 테마의 수정과 업데이트에 있습니다. 만약 자식 테마를 사용하지 않고 원본 테마인 부모 테마의 설정과 내용을 수정한다면 테마의 업데이트 될 때 한 순간에 자신이 작업했던 모든 변경 내용이 날라가게 됩니다.

테마를 설치해서 사용할 때 설치시 초기 설정와 모든 세팅값을 100% 그래도 사용한다면 굳이 자식 테마를 사용할 필요가 없겠지만 그런 경우는 거의 없습니다. 일반적으로는 테마 콘텐츠의 위치를 변경한다든지 이미지를 변경한다든지 여러가지 스타일 값을 변경해서 사용합니다. 그렇다고 부모 테마에 직접 수정을 하는 것은 바람직하지 않습니다. 그래서 자식 테마가 필요한 것입니다.

한 가지 더 알고 있어야 할 내용은 자식 테마 만으로는 테마가 동작하지 않는다는 것입니다. 부모 테마를 기본으로 가지고 있어야 기능이 작동합니다.


자식 테마는 어디에서 제공받는가?


그렇다면 자식 테마는 어디에서 제공받아서 사용해야 하는가? 하는 생각을 하게 됩니다. 테마를 설치한다고 해서 모든 테마가 자식 테마를 제공하는 것은 아닙니다. 물론 유료 테마는 많은 경우 테마 제작사에서 자식 테마를 함께 제공하는 경우가 많지만 그렇다고  100% 자식 테마를 제공하는 것은 아닙니다. 

- 자식 테마를 제공하는 유료 테마 The7 - 



만약, 테마 제작사가 자식 테마를 제공하고 있지 않다면 워드프레스 공식 사이트에서 자식 테마 만드는 방법을 참고해서 제작할 수 있습니다.


자식 테마 구조 쉽고 빠르게 이해하는 방법


자식 테마(Child Theme)을 만드는 방법은 무척 간단합니다. 몇 개의 조건만 충족되면 자식 테마로서 기능이 작동합니다. 일단 테마 폴더에 자식 테마 폴더를 만들고 그 폴더 안에 style.css 화일이 있으면 됩니다. 그리고 style.css 화일 안에서 부모 테마가 누구인지를 설정해주면 됩니다.

그럼 하나하나 살펴보도록 하겠습니다. 먼저 자신의 워드프레스가 설치된 경로에 들어갑니다. 호스팅을 받고 있다면 호스팅 서버에 들어가야 할 것이고, 로컬 PC라면 PC에 워드프레스가 설치된 경로로 들어갑니다.

워드프레스가 설치된 폴더에서 디렉토리 구조를 보면 테마는 /wp-content/themes 의 디렉토리 경로에 위치하게 됩니다. 즉, 각각의  테마 화일은 모두 themes 디렉토리 아래에 폴더 형태로 구성되어 있습니다. 저의 경우 서버 내에 현재 총 4개의 테마가 설치되어 있는 것을 확인할 수 있습니다.



자식 테마가 되는 조건은 세 가지라고 언급하였습니다. 다시 한 번 확인하면, 자식 테마의 조건은 아래와 같습니다.

자식 테마의 조건

첫째, 자식 테마의 폴더 위치
둘째, 자식 테마 폴더 내에 style.css 화일 포함 여부
세째, style.css 내에 부모 테마에 대한 import 설정


자식 테마 디렉토리 만들기


이제 우리가 학습하고 있는 twentyfourteen 테마에 대한 자식 테마를 만들고 사이트에 적용하는 방법을 알아보도록 하겠습니다
먼저 themes 폴더 아래에 twentyfourteen-child 라는 폴더를 생성합니다. FTP 프로그램에서 themes 폴더에서 마우스 우클릭을 해서 디렉토리 만들기를 클릭합니다.



생성할 디렉토리 이름에 twentyfourteen-child 를 입력하고 확인 버튼을 클릭합니다.



아래와 같이 twentyfourteen-child 라는 자식 테마 폴더가 생성된 것을 확인할 수 있습니다.



자식 테마에 사용할 style.css 화일 제작 및 서버에 배치


이제 twentyfourteeen-child 폴더 안에 style.css 화일을 만들 것입니다. 먼저 로컬에서 서브라임 텍스트로 style.css 화일을 만들고나서 FTP 프로그램을 통해서 서버로 업로드해서 테스트 할 것입니다.

서브라임 텍스트 편집기를 열어서 아래와 같이 코드를 작성합니다. 주석 안에는 테마의 이름과 설명, 그리고 테마를 만든 테마 제작자를 명기합니다. Theme Name은 Twenty Fourteen Child 라고 작성하고, Author는 Shuman으로 작성하였습니다. 나머지도 아래와 같이 작성합니다.
 
아래쪽 소스 코드 상에 import 부분은 자식 테마의 부모가 누구인지를 연결하는 부분입니다. 프로그래밍에서 이렇게 상속을 할 때는 import 구문을 자주 사용합니다. 즉, 부모의 스타일 시트 전체를 상속받아서 사용한다는 의미입니다.



이제 로컬에서 저장한 화일을 서버의 twentyfourteen-child 폴더 안으로 FTP 프로그램을 활용해서 업로드합니다. 업로드가 완료되고 나면 아래와 같이 자식테마 디렉토리안에 style.css 화일이 보일 것입니다.



그리고 부모 테마 폴더에 가서 screenshot.png 화일을 로컬로 내려 받은 뒤에 다시 자식 폴더에 업로드 합니다. 이 화일은 워드프레스 관리자 화면에서 테마 화면에 들어갔을 때 자식 테마를 나타내는 대표이미지로 사용될 것입니다.



최종적으로 자식테마 폴더인 twentyfourteen-child 디렉토리 안에는 아래와 같이 2개의 화일을 배치하였습니다.



외모에서 테마 설정하기


이제 관리자 화면에서 현재 테마를 자식 테마로 변경하겠습니다. 먼저 왼쪽 사이드바 메뉴에서 외모 > 테마 메뉴를 클릭합니다.



왼쪽 맨 처음에 활성화 되어있는 Twenty Fourteen 테마가 현재 적용된 테마입니다. 그 아래에 보면 조금전 우리가 만든 Twenty Fourteen Child 테마가 있습니다. 



Twenty Fourteen Child 테마 위에 마우스를 올리면 활성화 버튼이 나타납니다. 활성화 버튼을 클릭합니다.



새로운 테마를 적용했습니다. 라는 메시지가 뜨고 자식 테마가 현재의 테마로 활성화 되었습니다. 



이제 제대로 사이트가 열리는지 확인해 보도록 하겠습니다. 일부 메뉴의 권한 관리 내역을 제외하고는 정상적으로 원본 부모 테마에 만들어 놓았던 사이트가 그래도 열리는 것을 확인할 수 있습니다. 단지 자식 테마 폴더와 스타일 시트만 추가했는데도 이렇게 쉽게 부모 테마의 내역을 상속받아서 새로운 테마로 작업이 가능한 것입니다.




자식 테마에만 나눔 명조 폰트 적용하기


새로 만든 자식 테마에 스타일을 적용하고 제대로 동작하는지 확인하겠습니다. 구글 나눔 명조체를 적용하겠습니다. CSS 스타일 편집기에서 아래와 같이 구글 폰트를 적용하고 스타일시트 저장 버튼을 클릭합니다.



사용자 화면에 들어가보면 사이트 전체에 명조체가 적용된 것을 확인할 수 있습니다. 이렇게 자식 테마에서 수정을 하면서 워드프레스 사이트를 만들어 나가면 됩니다.



반응형
반응형

뉴스레터를 왜 사용해야 하는가?


웹사이트를 운영하면서 자신의 회원에게 뉴스레터(Newsletter)를 보내는 것은 회사 홍보나 홈페이지의 지속적인 운영에 큰 도움을 줍니다. 정기적으로 발송하는 뉴스레터를 통해서 신상품이나 할인 이벤트를 소개할 수도 있고 연말이나 연휴 특수를 올릴수도 있기 때문입니다.

무엇보다 뉴스레터를 발송하면서 가장 큰 이점은 자신의 회원들과 지속적인 유대관계를 가질 수 있는 연결고리를 가질 수 있다는 점입니다. 요즈음 같이 SNS가 활성화 된 인프라 환경에서는 제대로 만들어진 하나의 뉴스레터 링크는 공유 기능을 통해 급속도로 확산될 수 있는 마케팅 도구가 됩니다.

워드프레스는 뉴스레터를 위한 많은 유무료 플러그인을 제공합니다. 여기에서는 뉴스레터 플러그인 중에서 30만명 이상이 설치해서 가장 대표적인 뉴스레터 플러그인이라 말할 수 있는 MailPoet Newsletters 플러그인을 설치하고 사용하는 방법을 알아보겠습니다.


MailPoet 뉴스레터 설치하기


왼쪽 사이드바 메뉴에서 플러그인 추가하기를 클릭합니다.



플러그인 검색 화면에서 newletter 라고 입력하고 엔터를 칩니다. 두 번째에 검색된 MailPoet Newsletters 플러그인을 설치할 것입니다. 지금 설치하기 버튼을 클릭해서 플러그인을 설치합니다.



플러그인을 활성화 링크를 클릭해서 플러그인 설치를 마칩니다.



왼쪽 사이드바 메뉴에 MailPoet 이라는 메뉴가 생성된 것을 확인할 수 있습니다. MailPoet 메뉴를 클릭합니다.



MailPoet 뉴스레터의 환영 메시지가 나타납니다. 처음 사용자를 위한 안내가 있고 사용자 가이드를 동영상도 있습니다.



하단의 Thanks! Now take me to MailPoet 버튼을 클릭합니다.



MailPoet로 뉴스레터 만들기


MailPoet > 뉴스레터 메뉴를 클릭합니다.



뉴스레터 목록에 샘플러인 5 Minute User Guide라는 뉴스레터가 하나 등록된 것을 확인할 수 있습니다  5 Minute User Guide 를 클릭합니다.


뉴스레터를 만드는 첫번째 단계입니다. 뉴스레터 타입은 Standard newsletter로 선택합니다.
Subject line 항목은 생성하는 뉴스레터의 제목을 적으면 됩니다. 아래와 같이 자신이 만들 뉴스레터의 제목으로 수정합니다. 
Lists 항목에서 뉴스레터를 구독할 구독자 체크박스에 체크한 뒤에 Next Step 버튼을 클릭합니다



두번째 단계는 뉴스레터의 콘텐츠를 구성하고 디자인하는 단계입니다. 이 화면은 마우스 드래그로 콘텐츠 박스를 이동이 가능해서 일종의 화면 빌더와 같이 쉽게 뉴스레터를 구성할 수 있습니다.



화면을 구성하는 방법은 간단합니다.
단계1 부분의 가운데 위쪽에 마우스를 가져다 대면 아래 화면과 같이 상단바가 생성될 것입니다. 상단바의 가운데를 마우스로 클릭해서 아래쪽으로 드래그앤드롭 합니다.



아래 화면과 같이 단계1 콘텐츠 박스가 단계2 콘텐츠 박스 아래로 이동되었습니다. 다시 원래대로 단계1 콘텐츠 박스를 위로 올립니다.



이제 단계1 부분에 뉴스레터의 제목을 아래와 같이 '슈만 클래식 바이크 12월 이벤트' 라고 작성합니다. 단계2 부분에는 판매할 바이크 이미지를 업로드 할 것입니다.



뉴스레터 이미지 첨부하기


이미지를 첨부하기 위해서 오른쪽 상단의 Image 탭을 클릭한 뒤에 Add Images 버튼을 클릭합니다.



Selct Files 버튼을 클릭해서 이미지를 업로드 합니다. 업로드가 완료되면 오른쪽 상단에 X버튼을 클릭해서 창을 닫습니다.




오른쪽에 바이크 이미지가 첨부되었습니다. 이제 이미지를 단계2 콘텐츠 박스 부분으로 드래그 합니다.



판매할 바이크 이미지가 정상적으로 삽입되었습니다.



이제 단계2와 단계3의 컨텐츠 내용을 이벤트 방식에 맞게 아래와 같이 작성합니다.




워드프레스 포스팅 글을 뉴스레터에 넣기


MailPoet 뉴스레터는 포스팅 글을 찾아서 드래그해서 삽입해서 뉴스레터를 전송할 수 있습니다. Content 탭에서 WordPress post 라는 메뉴를 마우스 드래해서 뉴스레터에 붙여넣을 수가 있습니다. Content 탭에서는 뉴스레터 본문 내용을 만드는데 도움을 주는 도구들로 구성되어 있습니다. Styles 탭은 스타일을 적용할 수 있으며, Themes 탭을 통해서 뉴스레터 테마를 선택해서 적용할 수 도 있습니다.



아래와 같이 원하는 곳으로 드래그를 합니다. 드래그 하는 쪽으로 Insert block here 라는 박스가 자동으로 생성됩니다.




드래그가 완료되고 나면 뉴스레터에 첨부할 포스트를 선택하는 화면이 나타납니다. 이곳에서 원하는 포스팅 글을 넣을 수 있습니다. 여기에서는 포스팅 글을 넣지 않겠습니다. 오른쪽 상단의 X버튼을 클릭해서 창을 닫습니다.



작성한 뉴스레터를 이메일로 확인하기


지금까지 작성한 뉴스레터를 Save changes 버튼을 클릭해서 저장한 뒤에 Send preview 버튼을 클릭해서 이메일로 전송합니다.



뉴스레터 메일이 전송되었다는 알림창이 뜹니다.



뉴스레터 미리보기를 전송한 메일 계정으로 들어가서 실제 뉴스레터가 어떻게 보내지는지 확인합니다. 메일 계정으로 들어가니 뉴스레터가 정상적으로 메일링 된 것을 확인할 수 있습니다. 여기에서는 방법만 알아보기 위해서 간단하게 뉴스레터를 만들어보았지만 세부 기능으로 스타일을 적용할 수 도 있으므로 뉴스레터를 이쁘게 제작할 수 있습니다.





뉴스레터 발송하기


미리보기로 뉴스레터를 확인하였으면 Next step 버튼을 클릭해서 실제로 뉴스레터를 전송하면 됩니다. Next step 버튼을 클릭합니다.



이곳에서는 보내는 사람의 메일 주소와 답변을 받을 메일 주소를 입력하고 최종 설정을 확인합니다. 모든 설정이 완료되었으면 보내기 버튼을 클릭해서 뉴스레터를 발송합니다.



예약 발송을 하려면 예약 시간과 일자를 세팅하면 됩니다.


반응형
반응형

플러그인은 양날의 검


플러그인은 워드프레스 사이트에 새로운 날개를 달아주는 획기적인 도구입니다. 그렇지만 플러그인은 양날의 검을 가진 툴이기도 합니다.
워드프레스 운영자가 처음에 겪는 실수 가운데 하나는 플러그인에 감탄하면서 플러그인을 끊임없이 늘려가는 것입니다.
그렇지만 관리되지 않고 조금씩 늘어난 플러그인은 결국 워드프레스 사이트에 중대한 영향을 미치게 됩니다.
플러그인의 갯수가 서버 성능의 임계치에 달하면 웹사이트 속도는 급격히 저하되고 페이지 하나 열리는데 5초에서 10초이상이 걸리는 일이 발생하게 됩니다.

아무리 잘만들어진 사이트라 할지라도(그것이 쇼핑몰이든지 유명 뉴스진이든지) 느린 속도는 애써 확보한 고객과 구독자를 잃어버리는 지름길입니다.
느린 웹사이트는 인터넷 사용자들이 가장 싫어하는 웹사이트 접근성 요소 중의 하나이기도 합니다.

결국 운영자는 급한 마음에 사이트 속도 저하를 막기 위해서 비용을 들여가면서 호스팅 서버의 메모리를 늘려보고 SSD나 CDN등 여러가지 하드웨어적인 기술을 적용해보지만 결국 플러그인을 최적화 하지 않고서는 또 사이트 속도의 문제는 필연적으로 발생합니다.

그래서, 사이트 성능을 위해서 비용을 들이는 것보다 가장 먼저 해야하는 일은 평소에 플러그인을 최적화 상태로 유지하는 습관을 들이는 것이 중요합니다. 플러그인을 최적화 하고서도 시스템의 속도와 성능 문제가 발생한다면 테마나 프로그램 소스를 확인해야 하고 그렇게 해서도 문제가 해결되지 않는다면 그때가서 비용을 지불하고 하드웨어 증설이나 튜닝을 진행해도 늦지 않습니다. 성능을 위해서 가장 먼저 관심을 가져야 할 것은 역시 플러그인의 최적화 입니다.


훌륭한 플러그인 성능 측정 도구 P3 Plugin


정량적으로 몇 개까지의 플러그인이 사이트에 좋다라고 말할 수는 없습니다. 단 한개의 플러그인도 시스템 퍼포먼스와 자원을 소진시킬 수 도 있기 때문입니다. 플러그인의 성능을 점검하는데 많이 사용하는 유용한 도구는 P3 플러그인입니다.
P3 플러그인의 정확한 명칭은 Plugin Performance Profiler 입니다. 세 개 단어의 앞자리 영문 P자를 따서 P3라고 명명하였습니다.
명칭 그대로 플러그인의 퍼포먼스를 점검하는 도구입니다. 따라서 점검 도구인 P3 플러그인으로 플러그인의 자원 점유 현황을 그때 그때 점검하면서 플러그인의 유지와 삭제를 결정해야 합니다.

P3 플러그인 설치하기


왼쪽 사이드바 메뉴에서 플러그인 추가하기 메뉴를 클릭합니다.


플러그인 검색창에서 P3 Plugin 을 입력하고 엔터키를 칩니다. 첫 번째 검색된 P3(Plugin Perfamance Profiler)의 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭합니다.




P3 플러그인으로 성능 점검하기


왼쪽 사이드바 메뉴에서 도구를 클릭하면 아래 서브 메뉴로 P3 Plugin Profiler 라는 항목이 생성된 것을 확인할 수 있습니다. P3 Plugin Profiler 를 클릭합니다.



P3 플러그인의 관리 화면이 아래와 같이 뜹니다. 현재 워드프레스 사이트에 설치된 플러그인 갯수는 총 19개 입니다. 이제 성능 점검을 시작하기 위해서 왼쪽에 Start Scan 버튼을 클릭합니다.



Scan name 항목에 플러그인 자동 점검을 위한 작업 명칭을 작성할 수 있습니다. 날짜와 유니크아이디로 sacn 작업 명칭이 생성되므로 그대로 두고 Auto Scan 버튼을 클릭합니다.



P3가 자동으로 워드프레스 사이트의 모든 플러그인 항목을 스캔하면서 아래 화면과 같이 점검하고 있습니다.



플러그인에 대해서 모든 점검이 끝나면 아래와 같이 View Results 버튼이 나타납니다. View Result 버튼을 클릭합니다.



플러그인에 대한 성능 점검이 모두 완료되고 아래와 같이 플러그인 성능 점검 리포트가 제공됩니다. 오렌지 박스에 있는 점검 결과를 왼쪽부터 순서대로 보겠습니다.

첫번째 항목은 사용자가 웹사이트 방문시 플러그인이 로드되는 시간으로 1.456초 입니다. 튜닝이 필요한 로드시간 입니다.
두번째 항목은 페이지가 로딩되는데(열리는데) 플러그인이 미치는 영향도로 89.9% 입니다. 두번째 역시 플러그인의 영향도가 높은 것을 알 수 있습니다.
세번째 항목은 사용자가 웹사이트 방문시 실행되는 MySQL 데이터베이스의 쿼리 수행 갯수로 60개의 방문자당 60개의 DB 쿼리가 수행되는 것을 나타냅니다. 



Runtime by Plugin


이제 첫번째 탭인 Runtime by Plugin 항목을 알아보겠습니다. 이 화면에서는 플러그인의 영향도를 쉽게 확인할 수 있는 원형 인포그라피로 어떤 플러그인의 영향도가 높은지를 정량적으로 시각화해서 확인할 수 있습니다.

눈으로 보아도 단번에 보라색과 노란색인 Kboard와 킹콩보드가 전체 플러그인의 70% 이상의 성능 자원을 점유하고 있음을 알 수 있습니다. 플러그인을 실습하느라 게시판 플러그인을 여러개 설치한 것이 자원을 상당부분 점유하였습니다. 일반적으로 게시판 플러그인은 자원을 많이 소진시킵니다. 다른 나머지 플러그인들을 모아 놓은 오렌지색의 Other는 플러그인의 갯수는 많아도 영향도가 크지 않음을 알 수 있습니다.



원형 도형 그래프에서 각 항목이 개별적으로 얼마만큼의 메모리 자원을 점유하고 있는지 확인하려면 원형 도형 위에 마우스를 올려놓으면 됩니다. KBoard 위에 마우스를 가져다 댑니다. KBoard 플러그인은 아래 화면에서와 같이 47%의 메모리 자원을 점유하고 있으며 플러그인 로딩 시간은 0.6854초가 걸립니다. 다른 플러그인도 이렇게 개별적으로 성능 점검을 할 수 있습니다.

또한, Email these results 링크를 클릭하면 점검 결과를 이메일로 전송할 수도 있습니다.



코어, 테마를 포함한 자원 점유 현황 확인


플러그인 뿐 아니라 워드프레스 시스템에 대한 전체적인 자원 점유 현황을 확인하기 위해서는 두 번째 탭인 Detailed Breakdown 탬을 클릭합니다. Detailed Breakdown을 보면 전체적인 사이트 로드 시간과 워드프레스 코어와 테마가 시스템 메모리 자원을 얼마나 점유하는지 그래프로 쉽게 확인할 수 있습니다. 



워드프레스 시스템의 메모리 점유 현황


워드프레스 시스템을 호스팅 받아서 사용하고 있다면 반드시 확인해야 하는 항목이 있습니다. 바로 메모리 사용 현황입니다. 메모 리 사용 현황을 확인하기 위해서는 맨 오른쪽에 Advanced Metrics 탭을 클릭해서 확인합니다. Memory Usage 부분이 워드프레스가 사용하고 있는 메모리 자원의 사용량입니다. 현재 96.58MB 입니다. 메모리 관리가 중요한 것은 호스팅에서 사용자의 메모리 사용량을 제한하기 때문입니다. 호스팅에서 제한하고 있는 메모리 Max 값을 초과하게 되면 시스템은 일종의 Out of Memory 에러를 발생할 수 있습니다.



플러그인 성능 점검 이력 보기


플러그인의 성능 점검 이력을 확인하기 위해서는 아래와 같이 두번째 History 탭을 클릭하면 됩니다. 아래 화면에서 보는 것 처럼 P3 플러그인으로 성능 점검한 이력이 목록화 되어서 나타납니다. 따라서 플러그인이 추가되거나 삭제되어도 정기적으로 성능 점검을 하였다면 서로 비교하면서 플러그인의 영향도를 평가할 수 있습니다. 

목록에서 점검했던 이름을 클릭합니다.



이력 상세화면에서 점검했던 결과 전체를 언제든지 다시 확인할 수 있습니다.




반응형
반응형
포스트를 작성하면 일반적으로 카데고리를 정해서 해당 카데고리 안에 포스트를 배치는 것이 일반적입니다. 물론 카데고리를 정하지 않으면 워드프레스에서는 미분류 라는 카데고리로 해당 포스트를 배치 시킵니다. 워드프레스에서 카데고리 관리를 하다보면 불편한 것이 있는데 그것은 카데고리의 순서를 변경하는 기능이 없는 것입니다. 따라서 순서를 편리하게 변경하기 위해서는 별도의 플러그인을 설치해서 사용해야 합니다.

먼저 워드프레스에서 기본적으로 제공하는 카데고리 관리 화면에 들어가보도록 하겠습니다. 왼쪽 사이드바 메뉴에서 글 > 카데고리를 클릭합니다. 아래 화면에서 보이는 것 처럼 워드프레스 기본 카데고리 기능에는 카데고리의 순서를 변경하도록 되어있지 않습니다. 그럼 플러그인을 설치해서 불편함을 해소하겠습니다.



Category Order 플러그인 설치하기


카데고리의 순서를 변경하는데 편리하게 이용할 수 있는 플러그인으로는 Category Order 플러그인이 있습니다. 왼쪽 사이드바 메뉴에서 플러그인 > 플러그인 추가하기 메뉴를 클릭합니다.


플러그인 검색창에서 Category Order 라고 입력하고 엔터키를 칩니다. 맨 처음 나타난 Cateory Order 플러그인이 우리가 설치할 플러그인입니다. 비록 업데이트가 된 지는 오래 되었지만 테스트 해본 결과 현재 워드프레스 버전과 큰 문제점은 발견되지 않았습니다. 오랜 기간 10만명 이상이 설치했던 일종의 워드프레스 플러그인의 고전이라 할 수 있습니다. 지금 설치하기 버튼을 클릭해서 설치를 진행합니다.



플러그인을 활성화 링크를 클릭해서 설치를 완료합니다.



Category Order 플러그인 사용하기


왼쪽 사이드바 메뉴에서 글을 클릭하면 아래와 같이 Category Order 라는 서브 메뉴가 생성된 것을 확인할 수 있습니다. Category Order 메뉴를 클릭합니다.


카데고리 순서를 변경할 수 있는 화면이 나타납니다. 카데고리 순서를 변경하는 것은 간단합니다. 마우스로 드래그앤드랍을 한 뒤에 Order Categories 버튼을 클릭해서 저장하면 됩니다.



그럼 미분류 카데고리를 마우스 드래그해서 맨 밑으로 이동하겠습니다.



카데고리를 변경한 뒤에 Order Categories 버튼을 클릭해서 저장해야 카데고리 변경이 완료됩니다. Order Categories 버튼을 클릭합니다.



카데고리 순서가 변경되었습니다. 오른쪽에 More 라고 표시된 것은 해당 카데고리안에 서브 카데고리가 존재하는 것을 나타냅니다. 서브카데고리의 순서를 변경하려면 More 링크를 클릭해서 순서를 조정하면 됩니다. 제품 서비스 안내에 붙어있는 More 링크를 클릭합니다.



제품 서비스 안내 안에 있는 서브 카데고리가 다음과 같이 나타납니다. 



그럼 실제로 카데고리 순서가 제대로 변경되었는지 글 > 카데고리 화면에 들어가서 확인해보겠습니다. 왼쪽 사이드바 메뉴에서 글 > 카데고리를 클릭합니다. 아래 그림과 같이 미분류 카데고르가 맨 아래로 이동된 것을 확인할 수 있습니다.


반응형
반응형
웹사이트를 만들고 나서 운영하다보면 다른 웹사이트나 책, 광고에서 볼 수 있는 미려한 폰트에 대한 욕심이 생기기 마련입니다. 워드프레스 사이트에 간편하게 적용할 수 있고 일반적으로 많이 사용하는 폰트는 구글 폰트와 네이버 나눔 폰트가 있습니다.
구글은 폰트 서비스를 통해서 전세계의 여러가지 폰트를 제공하고 있습니다. 구글 폰트는 자신이 운영하는 서버나 자신의 PC에 폰트를 다운로드해서 설치하는 방식을 사용할 수도 있고 URL 링크 기반으로 불러오는 방식을 사용할 수도 있습니다. URL 링크 기반으로 불러오는 폰트 사용 방식을 웹폰트 라고도 합니다. 여기에서는 링크 기반의 구글 웹폰트를 사용해서 워드프레스 사이트에 적용하는 방법을 알아보도록 하겠습니다.

구글 폰트


구글 폰트는 많은 종류가 있습니다. 먼저 구글 폰트 서비스 사이트에 들어가서 자신의 사이트에 적합한 폰트를 찾아야합니다. 웹브라우져를 열고 구글 폰트 서비스 사이트에 접속합니다.



구글에서 아직까지는 한국어 폰트는 정식버전으로 제공되고 있지는 않습니다. 왼쪽 Script 항목의 콤보박스를 클릭해서 확인해보면 한국어 버전인 Korean 은 없는 것을 확인할 수 있습니다.


한국어 버전은 임시 서비스(Early Access)로 제공되고 있습니다. Early Access로 제공되는 폰트를 확인하기 위해서 오른쪽 상단 메뉴에서 More Scripts를 클릭합니다.



임시 서비스인 Early Access 폰트가 리스트업 됩니다. 



명조체 관련된 한국어 폰트를 찾기 위해서 웹브라우저 화면에서 Ctrl + F 를 클릭해서 Korean을 입력하고 엔터를 칩니다. 아래로 내리다 보면 나눔 명조체인 Nanum Myeongjo 폰트가 검색됩니다.



구글은 구글 폰트를 사용할 수 있도록 링크와 사용 예제를 제공합니다. Link 부분과 Example 부분의 텍스트를 복사해서 메모장에 붙여넣습니다. 복사한 텍스트는 조금 뒤에 Custom CSS에 적용하는데 쓰일 것입니다.



워드프레스 사이트에 구글 폰트 적용하는 방법


먼저 자신의 워드프레스 사이트에 접속합니다. 아래 화면에서와 같이 슈만의 사이트에서는 고딕계열의 폰트체가 적용된 것을 확인할 수 있습니다.



이제 워드프레스 관리자 화면으로 들어와서 Custom CSS 방식으로 웹사이트 전체에 나눔 명조를 적용하겠습니다. 왼쪽 사이드바 메뉴에서 외모 > CSS 편집 메뉴를 클릭합니다.



CSS 스타일시트 편집기 화면이 나타납니다. 이곳에 구글 나눔명조 폰트를 CSS 스타일로 적용하면 Custom CSS 방식으로 웹사이트 전체의 폰트가 변경될 것입니다. 



조금 전 구글 폰트 사이트에서 복사한 아래의 나눔명조 폰트의 텍스트를 CSS 스타일시트 편집기에 붙여서 사용할 것입니다. 그렇지만 아래 그대로 붙여넣으면 않됩니다. CSS 문법에 맞추어서 붙여 넣어야 합니다.

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

font-family: 'Nanum Myeongjo', serif;


구글 폰트 사이트에 복사한 텍스트를 아래와 같이 CSS 문법에 맞게 편집합니다.

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

body{ font-family: 'Nanum Myeongjo', serif; }


이제 편집한 텍스트를 CSS 스타일시트 편집기에 아래와 같이 붙여넣고 스타일시트 저장 버튼을 클릭합니다.



스타일시트가 저장되었습니다. 라는 메시지가 뜨고 import 구문이 맨 윗줄로 위치가 이동됩니다. 표준 문법에 따라서 위치가 이동되는 것이므로 코드의 위치는 신경쓰지 않아도 됩니다.



이제 구글 폰트가 제대로 적용되었는지 웹사이트에 들어가서 확인합니다. 웹사이트 전체 폰트가 나눔명조체로 적용되었습니다. 




정확하게 소스 코드상에서 어떻게 적용하였는지 확인하기 위해서 마우스를 화면에 놓고 오른쪽 마우스를 클릭해서 뜨는 창에서 검사를 선택해서 HTML 소스코드 요소 검사를 실행합니다.




오른쪽 화면에 HTML 소스에 대한 요소 검사화면이 나타납니다. Ctrl + F를 클릭해서 검색창에서 Nanum 이라고 검색하면 아래와 같이 Custom CSS 스타일이 적용된 것을 확인할 수 있습니다. 나눔 명조체 말고도 구글 폰트 사이트에서 여러 종류의 폰트가 있으지 자신의 웹사이트 성향에 가장 적절한 폰트를 찾아서 적용하면 됩니다.




반응형
반응형

웹표준과 워드프레스


워드프레스는 웹표준인 HTML과 CSS 기반하에 제작된 시스템 도구입니다. 워드프레스는 코어 부분부터 웹표준을 기반으로 제작된 CMS 툴이기 때문에 워드프레스를 깊이 공부할수록 웹표준에 대한 이해가 있어야 다루기가 수월한 것이 사실입니다.
워드프레스를 이야기 할 때 자주 언급되는 Custom CSS를 이해하는 것도 마찬가지입니다. HTML과 CSS 지식이 있는 만큼 이해도가 높을 것입니다. 웹표준인 HTML5와 CSS3를 공부해두는 것은 자신의 미래 경쟁력을 향상시키는 길입니다.

워드프레스 테마 스타일 화일


워드프레스 코어는 이미 짜여진 동일한 프레임웍 구조 안에서 움직이고 있습니다. 워드프레스 테마 역시 코어 프레임웍 구조 안에서 동작합니다. 워드프레스 4.3.1을 설치하면 현재 포스팅에서 다루고 있는 Twenty Fourteen 테마와 Twenty Thirteen, Twenty Fifteen 테마 총 3개가 기본 제공됩니다.

현재 적용된 워드프레스 테마 스타일 화일을 확인하기 위해서는 외모 > 테마편집기를 클릭하면 확인할 수 있습니다.



테마 편집기 안에서 마우스 스크롤을 내려서 Twenty Fourteen 스타일 시트인 style.css 화일 내용을 볼 수 있습니다. 아래로 조금 내리면 오렌지색 박스가 그려진 부분이 기본적으로 HTML 태그에 대해서 스타일을 일괄 적용한 곳입니다. 그렇지만 테마 스타일 화일인 style.css를 이곳 테마편집기 안에서 수정하는 경우는 거의 없습니다. style.css 의 텍스트 양이 많기 때문에 마우스 스크롤 속도모 무척 느릴뿐 아니라 오타의 확률도 높기 때문입니다.



서브라임 텍스트 Sublime Text


일반적으로 테마 스타일 화일을 수정할 때 권고하는 것은 HTML/CSS 전용 편집기를 사용하는 것입니다. 요즈음 퍼블리셔나 개발자가 가장 선호하는 편집기 중 하나는 서브라임 텍스트 입니다. 서브라임 텍스트는 서브라임텍스트 사이트에서 무료로 다운로드 해서 사용이 가능합니다. 단 무료 버전은 광고가 있습니다. 좋은 툴이기 때문에 많이 사용한다면 유료 구매도 고려해 볼만 합니다. 아직 서브라임 텍스트가 설치되어 있지 않다면 다운로드해서 설치합니다.



Twenty Forteen 테마의 테마의 물리적인 스타일 화일인 style.css 화일은 wp-content/themes/ 안에 존재합니다. 실제 화일은 호스팅을 받고 있는 서버 안에 있으므로 FTP 툴로 접속하면 아래 그림과 같은 폴더 경로가 나올 것입니다. wp-content/themes/twentyfourteen 폴더 안에 style.css 화일이 있고 style.css 화일을 로컬 PC로 다운로드 받거나 바로 클릭해서 서브라임 텍스트 편집기로 열 수 있습니다. 



조금 전 워드프레스의 테마편집기에서 열었던 style.css 화일을 서브라임 텍스트 편집기로 열면 아래와 같습니다. 아래 화면과 같이 일단 코드에 대한 시각적 가독성이 뛰어나고 여러가지 편리한 편집 기능을 제공합니다.




Custom CSS 란?


워드프레스 테마는 wp-content/themes 경로 안에 폴더 형태로 존재하게 됩니다. 그래서 해당 테마의 스타일 화일을 수정하면 테마가 수정됩니다. 그렇지만 그렇게 직접 해당 테마의 스타일 화일을 수정하면 테마가 업데이트 되게되면 자신이 수정했던 내용이 모두 사라지게 됩니다. 그런 황망한 경험을 한 유저도 많을 것입니다. 또한 수정한 화일의 버전관리도 어렵습니다.
그래서 사용하게 되는 것이 Custom CSS 입니다.

Custom CSS는 시간순으로 맨 나중에 작성한 CSS 코드가 시스템에 적용되는 원리를 이용해서 원본 CSS를 수정하지 않고 적용하는 것을 말합니다. 그렇지만 Custom CSS는 워드프레스에서 기본 기능으로 제공하고 있지 않고 별도로 설치한 테마에서 제공을 하거나 테마에서 제공을 하지 않을 때는 플러그인에서 설치하면 됩니다. 플러그인으로는 20만명 이상이 사용하고 있는 Simple Custom CSS이 좋습니다.



좋은 테마 수정 습관


조금 전 원본 테마의 화일을 수정하는 것은 좋지 않은 방법이라 하였습니다. 테마를 변경해야 할 때는 스타일은 Custom CSS를 사용해서 변경하고, 소스 코드 수정을 할 때는 자식 테마를 만들어서 사용하는 방법을 권고합니다.
요즈음에는 유료 테마를 구매해서 설치하면 자식 테마를 샘플이나 XML 화일을 대부분 기본적으로 제공하기 때문에 쉽게 자식테마를 활용해서 테마를 수정할 수 있습니다. 이렇게 테마를 수정하는 것이 향후 시스템 유지보수에도 좋은 방법입니다.

좋은 테마 수정 습관으로, 테마를 수정할 때는 커스텀 CSS와 자식테마(Child Theme) 이 두 가지를 꼭 기억하면 되겠습니다. 


반응형

+ Recent posts