이전 포스팅)

Post


포스트는 글목록을 보여주는 기능을 하는 숏코드입니다. 제목과 미리보기 정도가 리스트업 됩니다.


포스트 숏코드 옵션 박스에서 Template 옵션으로 포스트 리스트를 보여주는 방식을 다음과 선택할 수 있습니다.
Template 입력창에 아래 코드를 입력하면 포스트 목록의 보기방식이 결정됩니다.

templates/default-loop.php : 전체글 목록을 보여줍니다. 
templates/teaser-loop.php : 썸네일 이미지와 제목을 보여줍니다.
templates/single-post.php : 단 한개의 글만 보여줍니다.
templates/list-post.php : 글의 제목만 리스트로 보여줍니다.



숏코드는 [su_posts]를 사용합니다.





결과 화면)

Template 옵션에서 default-loop.php를 입력하면 아래와 같이 포스트 리스트가 제목과 미리보기로 리스트업 됩니다.




Table


테이블 숏코드를 사용해서 테이블을 만들 수 있습니다. 빌더 기능을 가지고 테이블을 그릴 수 있는 기능까지는 아니고 HTML 소스코드를 입력하거나 파일을 업로드해서 테이블을 구현하는 숏코드입니다. Table 을 클릭합니다.




테이블 숏코드 옵션 박스에서는 엑셀 업로드 기능을 지원합니다.
테이블을 만들 때 편리한 방법중의 하나는 MS 엑셀을 활용하는 것입니다. 일반적으로 사람들은 업무나 과제를 수행하면서 엑셀을 다루는데 익숙한 경우가 많습니다. 따라서 복잡한 테이블은 엑셀로 만든 뒤 csv 확장자로 저장해서 업로드하면 편리하게 테이블을 만들 수 있습니다.

테이블을 만드는 방법은 아래처럼 CSV file 업로드 기능을 이용하거나 Content 항목의 HTML 테이블 코드를 바로 입력하는 것입니다.





테이블 숏코드는 [su_table] 입니다.




결과 화면)




Service


서비스 숏코드는 해당 사이트에서 제공하는 서비스를 표현하기에 적합한 숏코드입니다.
서비스 제목과 설명으로 구성됩니다. 제품이나 서비스에 대한 소개 뿐아니라 고객센터나 전화상담 등 어떤 내용을 간락하게 설명하기에 적합한 양식의 숏코드입니다.



서비스의 숏코드는 [su_service] 입니다.




결과 화면)




Box


박스는 글과 제목을 적을 수 있는 콘텐츠 박스입니다.


숏코드는 [su_box]를 사용합니다.




결과 화면)




Note


노트는 콘텐츠를 강조하거나 구분지어 사용할 때 편리한 숏코드 기능입니다. 노트의 색상을 변경해서 포스트잇 느낌을 살려서 사용해도 좋습니다.



노트 숏코드는 [su_note]를 사용합니다.



결과 화면)




Expand


익스펜드는 텍스트 블록을 more text와 less text로 보여줄 수 있습니다.



옵션 박스에서 보여주기 원하는 텍스트를 입력합니다.



숏코드는 [su_expand]를 사용합니다.




결과 화면)





Tooltip


마우스가 오버되었을 때 동작하는 툽팁을 위한 숏코드 입니다.


숏코드는 [su_tooltip]을 사용합니다.



결과 화면)


마우스오버를 하면 아래와 같이 툴팁 박스가 생성됩니다.





YouTube


콘텐츠 본문에 유튜브를 연동해서 사용할 수 있는 숏코드입니다.


옵션 박스에서 유튜브의 URL 경로를 입력합니다.




숏코드는 [su_youtube]를 사용합니다.







Permalink


고유주소인 퍼마링크를 만드는 숏코드입니다.




태그는 [su_permalink]를 사용합니다.



결과 화면)



Member


멤버 기능은 로그인한 사용자에게만 보여주는 콘텐츠를 만드는 기능입니다.



옵션 박스에서 로그인 페이지의 URL 링크를 입력하는 곳에 워드프레스 로그인 페이지인 wp-login.php 을 입력해야합니다.




숏코드는 [su_members]를 사용합니다.




결과 화면)
로그인한 사용자에게 입력한 콘텐츠가 보입니다.




Guest


게스트만을 위한 콘텐츠를 제작할 때 사용하는 숏코드입니다.


숏코드 태그는 [su_guests]를 사용합니다.




RSS Feed


RSS Feed 기능을 구현합니다. RSS 기능은 일종의 온라인 신문 구독시스템으로 이해하면 됩니다.
RSS를 통해서 원하는 온라인 콘텐츠를 구독하는 기능입니다.


옵션 박스에스 구독할 RSS URL을 입력합니다. 여기에서는 블로터의 RSS 피드를 입력하였습니다.



숏코드는 [su_feed]를 사용합니다.



결과 화면)
블로터의 기사 피드가 화면에 디스플레이 됩니다.



Gmap


본문 콘텐츠 내에 구글 지도를 구현할 수 있는 숏코드입니다.


옵션 박스에서 구글 지도에서 검색할 지역 이름을 입력합니다


숏코드는 [su_gmap]을 사용합니다.



결과 화면)


이전 포스팅)

지난 시간에 이어서 Shortcodes Ultimate의 기능을 계속해서 살펴보도록 하겠습니다. 계속 이어지는 내용이지만 제목이 조금 틀린것은 구글 검색등 검색엔진 SEO 측면 때문에 다른게 변경하여 작성하고 있습니다. 각각의 숏코드에 대해서 글작성 페이지에 적용하고 결과화면을 보는 과정이 동일하므로 동일한 설명은 배제하고 결과화면 위주로 진행하겠습니다.

사용자가 모든 숏코드를 테스트 해보려면 시간이 걸리지만 아래 포스팅을 보면 대략적인 숏코드의 동작을 확인할 수 있습니다.

Button


스타일이 입혀진 버튼을 만들수 있는 숏코드입니다. 다양한 아이콘을 버튼에 조합해서 만들 수 있기 때문에 별도로 버튼을 디자인하는 시간을 절약할 수 있습니다.


버튼에는 많은 옵션들이 있습니다. 버튼에 있는 옵션만 제대로 이해하면 다른 숏코드의 사용법에 대해서도 문제가 없을 것입니다.
다른 숏코드도 마찬가지이지만 버튼의 모양들을 확인하기 위해서는 Examples of use 를 클릭해서 확인하는 것이 좋습니다. Examples of use를 클릭합니다.



다양한 버튼의 디자인이 디스플레이됩니다. 원하는 버튼은 바로 Get the code를 해서 숏코드를 복사해서 글작성 본문에서 사용하면 됩니다.




Link : 링크는 버튼을 클릭했을 때 이동하는 웹페이지의 주소입니다.
Target : 현재 탭에서 화면을 열지 아니면 새 탭열기를 할지를 결정합니다.
Style : 버튼의 형태를 결정하는 것입니다.
Background : 버튼의 배경색상을 결정합니다.
Text color : 텍스트의 색상을 결정합니다.




Size : 버튼의 크기를 조정합니다.
Fluid : 버튼의 폭을 전체 폭인 100%로 할 지를 결정합니다.
Centered : 중앙 정렬을 할지를 설정합니다.
Radius : 버튼의 둥글기 정도를 설정합니다.
Icon : 버튼 앞에 사용할 아이콘을 선택해서 사용할 수 있습니다.


Text shadow : 텍스트 그림자 효과를 설정합니다.
Description : 버튼 이름 아래에 추가적인 텍스트를 입력할 수 있습니다.



버튼의 경우에는 옵션에서 Icon picker를 사용하는 것을 추천합니다. 버튼에 간단한 아이콘을 넣으면 명시적으로 해당 버튼의 기능을 잘 알아볼수 있고 시각적으로도 우수하기 때문입니다. Icon picker 버튼을 클릭합니다.



버튼용 아이콘이 많이 디스플레이 됩니다. 원하는 아이콘을 선택하여 클릭합니다.




로켓모양의 아이콘을 클릭하니 icon:rocket 이라는 텍스트가 자동으로 입력됩니다. insert shortcode 버튼을 클릭해서 옵션을 적용합니다.




버튼의 숏코드는 [su_button] 입니다.




결과 화면)
로켓 아이콘이 들어간 스타일 버튼이 완성된 것을 확인할 수 있습니다.






Label


글작성 페이지에서 Insert Shortcode 버튼을 클릭한 뒤에, 아래와 같이 팝업 창에서 Label을 클릭합니다.



Content 항목에 적절한 내용을 작성한 뒤에 insert shortcode 버튼을 클릭합니다.



라벨의 숏코드는 [su_label] ... [/su_label] 입니다. 미리보기 버튼을 클릭해서 적용 화면을 확인합니다.



결과 화면)
HTML CSS 작업을 별도로 하지 않았지만, 바로 사용해도 좋을 수준의 Label 아이콘이 만들어졌습니다. Label 내의 텍스트는 옵션창의 Content 항목에서 작성해도 되고, [su_label]Label[/su_label] 처럼 바로 HTML 편집기에서 작성해도 좋습니다.



Quote


인용구를 만드는 숏코드입니다.



숏코드 태그는 [su_quote]를 사용합니다.



결과 화면)




PullQuote


막대가 있는 모양의 인용구 숏코드입니다.


숏코드는 [su_pullqute]를 사용합니다.



결과 화면)



Dropcap


드롭캡은 글장식을 위해서 첫글자를 크게 쓰는 방법입니다. 아래 그림을 보시면 이해가 빠르실 것입니다.

드롭캡 예시 화면)






숏코드는 [su_dropcap] 으로 사용합니다. 



결과 화면)
BA를 입력했을 때의 결과 화면입니다.



Frame


이미지 프레임을 만드는 숏코드로 세련된 이미지 액자 스타일이 적용됩니다.



숏코드는 [su_frame] 입니다. 실제 Text 입력 화면에서 입력되는 값은 아래과 같습니다.
이미지가 있는 경로를 img src 태그 안에 정의하면 됩니다.

[su_frame]<img src="http://lorempixel.com/g/400/200/" alt="" />[/su_frame]



결과 확인)




Row


Row 컬럼으로 화면은 분할하는 기능입니다.



Row 숏코드는 [su_row] 태그안에 [su_column] 태그가 멀티로 추가되는 구조입니다.



결과 화면)

화면이 Row로 3등분 된 것을 확인할 수 있습니다.




Column




숏코드는 [su_coulumn] 입니다.


결과 화면)




List


순서가 없는 리스트를 만드는 숏코드 입니다.



숏코드는 [su_list]를 사용합니다.



결과 화면)


워드프레스 콘텐츠를 풍성하게 만드는 숏코드


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

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

숏코드는 글을 작성하면서 필요한 곳에 태그 명령을 사용해서 각종 표, 박스, 아이콘, 버튼들을 쉽게 구현할 수 있도록 하는 훌륭한 도구입니다.
가령 구글 지도를 콘텐츠 본문 내에 삽입하고 싶다면, 본문에 태그로 [shortcode] [su_gmap address='노원구 상계동'] [/shortcode] 와 같이 간단하게 구현할 수 있습니다.

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

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


Shortcodes Ultimates 플러그인 설치


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



오른쪽 플러그인 검색창에서 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에 대한 숏코드가 나옵니다. 이 코드를 복사해서 글작성시에 첨부하면 바로 사용할 수 있습니다. 그렇지만 글작성 시점에서도 필요한 숏코드를 확인할 수 있으니 이곳에서는 숏코드 동작만 확인만 하면 됩니다.





+ Recent posts