워드프레스와 미래

이전 포스팅)

지난 시간에 Shortcodes Ultimate 플러그인의 설치를 완료하였습니다. 이번 시간에는 숏코드를 활용해서 글작성하는 방법을 알아보도록 하겠습니다.

왼쪽 사이드바 메뉴에서 글 > 새 글 쓰기 메뉴에 들어갑니다

새 글 쓰기 화면에 들어왔습니다. 새 글 쓰기 화면에 Insert shorcode 라는 버튼이 생성된 것을 확인할 수 있습니다.

먼저 숏코드가 어떤 종류가 있는지 확인하기 위해서 Insert shortcode 버튼을 클릭합니다.

여러 종류의 숏코드들이 이해하기 쉽게 아이콘으로 나와 있습니다. 각각의 아이콘을 클릭하면 해당 숏코드가 글을 작성하는 본문에 텍스트 형태로 삽입되고 실제 엔드유저쪽에서 보는 사용자 화면에서는 숏코드가 적용된 화면이 나타나게 됩니다. 숏코드가 많지만 몇 가지만 샘플로 사용해보면 숏코드가 동작하는 방법을 금세 익힐 수 있습니다.

숏코드를 이해하는 가장 빠른 방법은 아래에 있는 모든 숏코드를 자신이 실습해서 결과를 확인하는 것입니다.

먼저 글의 제목에는 간단히 숏코드 결과확인 이라고 작성을 합니다. Insert shortcode 버튼을 클릭합니다.

헤딩(Heading)은 제목에 스타일을 입히는 것입니다. 첫번째 있는 Heading을 클릭합니다. 

헤딩 숏코드에 대한 옵션을 설정하는 창이 나옵니다. 크기와 위치를 설정할 수 있고 글이 들어가는 위 아래의 마진(margin)의 폭을 설정할 수도 있습니다.

그리고 실제 헤딩에 들어가는 텍스트를 옵션창에서 입력이 가능합니다. Content 항목에 '알리바바, 스냅챗 기업가치 무려 16조원으로 평가'를 입력합니다.  입력이 완료된 뒤에 Insert shortcode 버튼을 입력합니다.

본문에 [su_heading] [/su_heading] 태그가 들어간 것을 확인할 수 있습니다. 숏코드란 바로 이것입니다. 여러가지 기능은 간단한 텍스트 태그로 구현해서 편리하기 웹페이지 작성이 가능하도록 한 것입니다. 또한 [su_heading] ... [/su_heading] 태그 사이에 작성한 콘텐츠가 들어간 것을 확인할 수 있습니다. 태그를 여러번 사용하다보면 Insert shortcode 버튼을 클릭해서 작업하는 것보다 바로 HTML 편집기 화면에서 텍스트로 작성하는 것이 더 빠르기 때문에 직접 태그를 입력하는 경우가 많습니다. 

그럼 실제로 이 숏코드가 사용자 화면에서 어떻게 보여지는지 확인하기 위해서 오른쪽에 미리보기 버튼을 클릭해서 확인해보겠습니다.

미리보기 화면을 클릭하니 다음과 같이 화면에 나타난 것을 확인할 수 있습니다.

결과화면)

HTML 스타일 작업을 하지 않았음에도 단 몇자의 숏코드 태그만으로 다음과 같이 멋진 제목글이 만들어졌습니다. 이래서 많은 사람들은 숏코드에 환호하는 것입니다. 이런 숏코드는 프로그래머나 디자이너, 웹퍼브리셔가 아니더라도 충분히 멋진 웹페이지를 만들어낼 수 있도록 도움을 줍니다.

두번째는 Tabs container 입니다. 간단히 탭 콘테이너를 구현할 수 있는 숏태그 입니다. Tabs를 클릭합니다.

Tabs 옵션창에서 별도로 입력작업을 하지않고 Insert shorcode 버튼을 클릭합니다.

Tabs에 대한 숏코드 태그는 [su_tabs] ... [/su_tabs] 입니다. 그리고 [su_tabs] 태그안에 [su_tab]이라는 서브 태그가 들어있습니다. [su_tab title="Title 1"]Content 1 은 [su_tabs] ... [/su_tabs] 안에 들어가는 구조입니다. 그리고 이런 태그가 Content1 ~ Content3까지 세 개가 있습니다. 결과를 확인하기 위해서 미리보기 버튼을 클릭해서 결과 화면을 확인합니다.

결과화면)

이런 식으로 각각의 숏코드를 입력하고 결과값이 어떻게 화면에 나타나는지 확인하는 것이 숏코드를 이해하는 가장 빠른 방법입니다. 결국 자주 사용하는 숏코드는 저절로 자연히 텍스트로 입력해서 사용하게 됩니다.

단일 탭 숏코드입니다. Tab을 클릭합니다.

     

숏코드 옵션창에서 별도의 설정을 하지 않고 Insert shortcode 버튼을 클릭합니다.

단일 탭 숏코드 태그가 [su_tab] ... [/su_tab] 과 같이 생성된 것을 확인할 수 있습니다. 미리보기 버튼을 클릭해서 결과를 확인합니다.

결과확인)

현재 단일 탭의 경우 플러그인 오류가 발생해서 화면에 표시되지 않습니다. 워드프레스는 코어의 버전과 플러그인이 맞지 않을 경우 오류를 발생할 수 있습니다. 따라서 플러그인을 다운받을 때가 유료로 구매할 때는 반드시 해당 플러그인에 대한 업데이트가 지속적으로 이루어지고 있는지 확인한 뒤에 구매하는 것을 권고합니다.

스포일러는 클릭하면 숨겨져있는 콘텐츠를 보이게 하는 숏코드 도구입니다. Spoiler를 클릭합니다.

숏코드는 [su_spoiler] ... [/su_spoiler] 입니다. 미리보기를 클릭합니다.

결과확인)

처음에는 플러스 표시로 표시되어있습니다. 플러스 표시를 클릭하면 

다음과 같이 숨겨진 콘텐츠가 동적으로 펼쳐지어 보여집니다.

아코디언은 스포일러가 여러개 멀티로 구성된 숏코드를 말합니다. Accordion을 클릭합니다.

별도의 옵션을 지정하지 않고 Insert shortcode 버튼을 클릭합니다.

아코디언은 [su_accordion] ... [/su_accordion] 태그안에 [su_spolier] [/su_spoiler] 태그가 여러개 멀티로 들어간 구조를 가집니다. 미리보기를 클릭합니다.

결과확인)

디바이더는 분할선을 그리는 숏코드입니다. Divider를 클릭합니다.

디바이더의 숏코드는 [su_divider] 입니다. 미리보기를 클릭합니다.

결과확인)

화면에 분할선이 나타나고 Go to top을 클릭하면 맨 위 화면으로 스크롤링 됩니다.

스페이서는 빈공간을 지정하는 숏코드입니다. 옵션에서 높이값을 입력해서 여백을 주게됩니다. 

옵션에서 높이를 지정합니다.

스페이서의 숏코드는 [su_spacer] 입니다.

결과확인)

눈에 보이지는 않지만 옵션에서 지정한 높이 공간만큼 여백을 가지고 갑니다.

     

하이라이트는 형광펜 기능 숏코드입니다. 텍스트에 색상을 입혀서 특정 문구를 강조할 수 있는 기능입니다.

숏코드 옵션창에서 배경색과 텍스트 색상을 선택할 수 있습니다. 텍스트에 하이라이트를 주기 위해서는 반드시 아래와 같이 Content 항목에 텍스트를 입력해야 합니다.

하이라이트 숏코드는 [su_highlight] ... [/su_highlight] 입니다.

결과확인)

워드프레스를 사용해서 개인블로그나 홈페이지를 제작할 때 사람들이 가장 많이 보게 되는 것은 결국 콘텐츠입니다. 콘텐츠는 기본적으로 텍스트인 글로 구성됩니다. 그렇지만 요즈음 추세는 단순히 글만 들어가는 것보다는 이미지뿐아니라 적절한 아이콘 및 도표, 버튼 등이 함께 들어가면 사용자에게 훨씬 더 훌륭한 사이트로 인식이 되는 것이 사실입니다.

홈페이지 콘텐츠 디자인은 사용자의 재방문율을 높이는 중요한 요소임에는 분명합니다.

누구나 깔끔하게 편집된 글을 보고 싶어합니다. 워드프레스는 글작성에 도움을 주는 숏코드라는 도구를 제공합니다.

숏코드는 글을 작성하면서 필요한 곳에 태그 명령을 사용해서 각종 표, 박스, 아이콘, 버튼들을 쉽게 구현할 수 있도록 하는 훌륭한 도구입니다.

가령 구글 지도를 콘텐츠 본문 내에 삽입하고 싶다면, 본문에 태그로 [shortcode] [su_gmap address='노원구 상계동'] [/shortcode] 와 같이 간단하게 구현할 수 있습니다.

[caption]과 같이 워드프레스에서 자체적으로 제공하는 숏코드들도 있지만 좀 더 풍성한 숏코드 사용을 위해서는 숏코드 플러그인을 설치하는 것이 좋습니다. Avada 같은 훌륭한 유료 테마의 경우에도 자체적으로 숏코드를 내장하고 있습니다. 이런 경우에는 테마에서 제공하는 숏코드를 사용해도 무방합니다.

숏코도는 유료와 무료가 있지만 Shortcodes Ultimate 플러그인은 무료이면서도 기능이 훌륭한 플러그인입니다.

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

오른쪽 플러그인 검색창에서 shortcodes ultimate 을 입력하고 엔터키를 칩니다.

맨 처음에 나온 플러인인 Shortcodes Ultimates 입니다. 이미 40만명 이상 설치를 하였고 현재 설치된 워드프레스 버전과 호환된다는 정보가 있습니다. 플러그인을 검색해서 설치할 때는 플러그인의 정보를 꼭 확인하는 것이 좋습니다. 별 다섯개 중에도 적어도 4개 이상의 플러그인인지 최근 업데이트는 언제 되었는지, 현재 사용하고 있는 워드프레스와는 호환이 되는지 등을 확인해야 합니다.

무료나 유료 플러그의 경우에도 업데이트가 1년이상 안되서 새로운 워드프레스 코어가 버전업 되었을 때 에러가 발생하는 경우가 있기 때문입니다.  따라서 별평점, 설치 건수, 최근 업데이트 여부, 워드프레스 버전과 호환 여부는 꼭 확인해야합니다.

Shortcodes Ultimate는 이런 면에서 아주 훌륭한 플러그인 입니다. 지금 설치하기 버튼을 클릭합니다.

플러그인이 성공적으로 설치되었습니다. '플러그인을 활성화' 를 클릭합니다.

플러그인을 활성화하고 나자 도구, 설정 메뉴 밑에 Shortcodes 라는 메뉴가 생성된 것을 확인할 수 있습니다. Shortcodes 메뉴를 클릭합니다.

Shortcodes 메뉴가 펼쳐지면서 아래와 같이 네 가지 서브 메뉴가 존재합니다.

Shortcodes Ultimate 의 첫화면은 세팅 화면으로 플러그인에 대한 설명과 튜토리얼 등을 확인할 수 있습니다. 왼쪽 사이드바에서 Examples 를 클릭합니다.

Examples 화면은 숏코드가 동작하는 것을 예제 화면으로 확인할 수 있습니다. Tabs 부분을 클릭합니다.

아래와 같이 Tabs 숏코드의 동작 모습을 예제화면으로 확인할 수 있습니다. 동작을 확인하다가 사용하고 싶은 숏코드가 있으면 Get the code 버튼을 클릭하면 됩니다. Get the code를 클릭합니다.

노란색 박스안에 Tabs에 대한 숏코드가 나옵니다. 이 코드를 복사해서 글작성시에 첨부하면 바로 사용할 수 있습니다. 그렇지만 글작성 시점에서도 필요한 숏코드를 확인할 수 있으니 이곳에서는 숏코드 동작만 확인만 하면 됩니다.