루프문 – The Loop

참고 : The Loop, The Loop In Action,

루프문은 일반적으로 글이 출력되는 모든 템플릿 파일내부에서 아래와 같이 사용이 됩니다.

<?php if(have_posts()):while(have_posts()):the_post(); ?>

<!-- 여기에 글 제목이나 글 내용 또는 글에 관련된 템플릿태그나 HTML 태그등이 사용됨 -->

<?php endwhile;endif; ?>

위의 Loop 문은 매우 압축된 표현형식이기 때문에 풀어보면 아래와 같이 됩니다.

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : ?>
		<?php the_post(); ?>

                <!--  여기에 php 템플릿 태그와 HTML을 입력 -->

	<?php endwhile; ?>
<?php endif; ?>

방문자가 워드프레스로 운영되는 사이트의 특정 URL(permalinks)로 접속을 하게 되면 워드프레스는 그 주소에 해당되는 페이지가 어떤 것인지 조사를 하고 그 페이지에 필요한 글들과 그 글들에 관련된 정보들을 데이터베이스에서 찾아내서 어떤 변수에 저장을 하고 페이지에 출력할 템플릿 파일을 찾아서 위에서 부터 순서대로 실행을 합니다.

그 템플릿 파일에서 위와 같은 Loop문을 만나게 되면 그 루프문이 지시한대로 해당되는 글들을 출력하게 됩니다.

if 문의 괄호안의 조건식에 있는 have_posts는 출력할 글이 있으면 참의 값을 가지고 출력할 글이 없으면 거짓 값을 가지며, 만약 참일 경우 if 문의 조건식이 참이므로 endif 줄까지 실행을 하게 됩니다.

if 문이 실행되면 while의 괄호안에 있는 have_posts 값도 참이므로 while문도 endwhile 줄까지 실행이 됩니다. 여기에 while문 뒤에 있는 the_post는 데이터베이스에서 불러와서 변수에 저장하고 있던 글들 중에 첫번째 하나의 글에 대한 정보(글 내용, 제목, 작성자, 날짜, 분류된 카테고리 등등…)만 불러오고 다음 글로 카운트가 됩니다.

여기서 the_post자체가 하는 역할은 해당하는 하나의 글 정보를 불러오고 다음글로 카운트하는 역할만을 하기 때문에 이것만으로는 아무 글도 출력이 되지 않습니다. the_post 다음에 글과 글에 대한 정보를 출력하는 템플릿 태그들을 사용해야 해당 글이 출력이 됩니다.

while 문은 한번만 실행되는 if 문과 달리 괄호안에 있는 조건식이 참이면 계속 반복이 됩니다. 따라서 하나의 글이 다 출력이 되고 endwhile을 만나면 다시 앞에 있던 while문으로 돌아가서 앞에 했던 방식으로 글을 출력을 합니다. 처음과 다른 점은 the_post에 의해 다음글로 카운트 되었기 때문에 다음글이 없을 경우 have_posts가 거짓 값을 가져서 while문이 실행이 중단이 될 수 있고, 만약 다음글이 있으면 while문이 다시 실행 되면서 두 번째 글을 출력하게 됩니다.

위의 기본적인 루프문이 조금 복잡하게 되면 아래과 같이 if 와 while 사이, 또는 endwhile 과 endif 사이에 추가적인 php 코드나 HTML 태그가 들어가게 됩니다. 하지만 while 과 the_post 사이에는 들어갈 일이 없기 때문에 항상 붙어 있습니다.

<?php if ( have_posts() ): ?>
 <?php while ( have_posts() ) : the_post(); ?>

 <div class="post">

 <!-- Display the Title as a link to the Post's permalink. -->
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

 <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
 <small><?php the_time('F jS, Y') ?< >by <?php the_author_posts_link() ?></small>

  <div class="entry">
    <?php the_content(); ?>
  </div>

  <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
 </div> <!-- closes the first div box -->

 <?php endwhile; else: ?>
 <p>Sorry, no posts matched your criteria.</p>
 <?php endif; ?>

주의할 점은,

• if 와 while 뒤에 있는 것은 마침표 두개가 세로로 있는 모양으로 콜론이며, endif 와 endwhile 뒤에 있는 것은 마침표와 쉼표로 되어있는 세미콜론입니다. if( ):로 조건문을 시작했으면 반드시 endif;로 if문을 마쳐야 하며, while( ):로 조건문을 시작했으면 반드시 endwhile;로 while 문을 마쳐야 합니다.
• 루프문안에서 사용되는 <?php the_permalink() ?>, <?php the_title(); ?>, <?php the_content(); ?> 와 같은 템플릿 태그들은 대부분 Loop 문 밖에서는 사용을 할 수 없습니다.

그 외 Loop 문 : get_posts, WP_Query, query_posts

검색을 해 보니깐 아래와 같은 소스들이 있었는데, 중복된 소스들이 많았습니다.

• htmldrive.net의 메뉴와 네비게이션 리소스
• dynamicdrive.com
• 38 jQuery And CSS Drop Down Multi Level Menu Solutions
• 45 jQuery Menu Tutorials Plugins

Jquery 드롭다운 메뉴 만들기

적용하기 전에 아래와 같은 것들을 우선 살펴봐야 됩니다.

• HTML 마크업 : 앞서 포스팅한 CSS 드롭다운 메뉴의 내용을 참고하시기 바랍니다.
• 브라우저간 호환 여부 : Jquery 드롭다운 메뉴 방법 중에 IE6을 지원하지 않는 경우가 적지 않습니다. IE6에서도 제대로 동작하기를 원하는 분은 확인해야 할 부분입니다.

jQuery Multi Level CSS Menu #2 방법을 워드프레스에 적용하기

처음엔 제 취향에 맞는 Smooth Navigation Menu를 적용했었는데, 인터넷 익스플로러 6 버전에서 제대로 동작을 하지 않아서, 여기서는 IE6을 지원하면서 Smooth Navigation Menu와 유사한 jQuery Multi Level CSS Menu #2를 적용해 보겠습니다.

HTML 마크업 확인

jQuery Multi Level CSS Menu #2 페이지에 가보면 메뉴 제작자가 설명을 잘 해 놓고 있습니다. The HTML 항목 밑의 HTML 소스를 보면 워드프레스가 메뉴를 출력하는 방식과 동일하기 때문에 워드프레스에서도 사용가능하다는 것을 알 수 있습니다.

css, js, 이미지 파일 업로드 하기

The external files 항목에 보면 필요한 파일들(jqueryslidemenu.css, jqueryslidemenu.js, down.gif, right.gif )이 있습니다. 마우스 오른쪽 버튼을 클릭한 후에 ‘다른 이름으로 저장’을 클릭해서 모두 컴으로 다운로드 받습니다.

다운 받은 파일을 계정의 테마 디렉토리로 업로드 합니다. 예를 들면, 이미지 파일은 images 디렉토리, 자바스크립트 파일은 js 디렉토리, css 파일은 css 디렉토리로 업로드 하면 됩니다.

head 태그 안에 css와 javascript 링크 넣기

The CSS/ JavaScript 항목에 밑에 나와 있는 소스를 header.php 파일내의 head 태그의 적당한 곳에 붙여넣어야 합니다. 붙여 넣기 전에 소스에 나와있는 파일들의 경로들을 계정에 올린 파일의 경로에 맞게 수정해 줘야 합니다.

워드프레스에서 포스트나 페이지의 경로는 ‘Setting>Permalinks’에서 설정한 실재하지 않는 가상 경로이지만, 이미지나 자바스크립트 파일들의 경로는 실제 계정의 경로를 사용해야 합니다. 만약 계정에 설치된 테마의 디렉토리 이름이 yourtheme 이라면 테마의 경로는 아래와 같이 됩니다.

http://yoursite.com/wp-content/themes/yourtheme

위와 같은 테마의 루트 디렉토리의 경로는 워드프레스에서 제공하는 <?php bloginfo('template_directory'); ?> 템플릿 태그로 대체할 수 있습니다. 따라서 The CSS/ JavaScript 항목에 있는 코드를 아래와 같이 계정으로 업로드한 파일의 경로에 맞게 수정한 후에, 테마의 header.php의 적당한 곳(<?php wp_head(); ?> 바로 밑에 줄)에 붙여넣기 하면 됩니다.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jqueryslidemenu.js"></script>

그리고, 계정에 올린 right.gif 와 down.gif 파일의 경로도 수정해 줘야 합니다. 보통 css 파일에서 이미지를 사용하는데, jQuery Multi Level CSS Menu #2는 jqueryslidemenu.js에서 사용하고 있습니다. 메모장이나 notepad++ 과 같은 텍스트 에티터로 jqueryslidemenu.js 파일을 열어서 10번째 줄 쯤에 있는 아래의 부분을,

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

경로에 맞게 아래와 같이 바꿔줍니다.

var arrowimages={down:['downarrowclass', 'http://yoursite.com/wp-content/themes/yourtheme/images/down.gif', 23], right:['rightarrowclass', 'http://yoursite.com/wp-content/themes/yourtheme/images/right.gif']}

아래와 같이 상대경로를 사용해도 됩니다.

var arrowimages={down:['downarrowclass', '../wp-content/themes/yourtheme/images/down.gif', 23], right:['rightarrowclass', '../wp-content/themes/yourtheme/images/right.gif']}

wp_nav_menu 수정하기

워드프레스에서 메뉴를 출력하는 함수인 wp_nav_menu를 찾아서 메뉴의 요소에 사용되는 엘리먼트의 id와 클래스명을 jQuery Multi Level CSS Menu #2 에서 사용되는 id와 class를 일치시켜줘야 합니다.

‘Appearance>Editor’에서 header.php를 열어보면 아래와 같이 wp_nav_menu 부분이 있습니다. 괄호안에 사용된 파라미터들은 테마마다 다를 수 있습니다. ( 구버전의 경우 wp_list_pages 함수를 사용하는데, 그럴 경우 워드프레스 3.0 메뉴로 수정을 해 줘야 합니다. )

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

jQuery Multi Level CSS Menu #2에서 ul 태그를 둘러싸고 있는 div 태그의 myslidemenu 라는 아이디를 출력하기 위해서 wp_nav_menu에 아래와 같은 파라미터를 사용해야 합니다.

'container_id' => 'myslidemenu'

jqueryslidemenu 라는 클래스명을 출력하기 위해서는 아래와 같은 파라미터를 사용해야 합니다.

'container_class' => 'jqueryslidemenu'

그리고, 원래 wp_nav_menu 에서 사용된 아래와 같은 theme_location 파라미터는 그대로 사용을 해야 합니다.

'theme_location' => 'primary'

위의 세개의 파라미터를 각각 쉼표로 구분해서, wp_nav_menu에 적용하면 아래와 같이 됩니다. ( 참고 : Function Reference/wp nav menu )

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_id' => 'myslidemenu', 'container_class' => 'jqueryslidemenu' ) ); ?>

아래와 같이 원래의 wp_nav_menu는 주석처리하고 그 밑에 바로 위의 코드를 붙여넣기 한 후에 실제 웹상에서 테스트 해보고 이상이 없으면, 주석처리한 원래의 메뉴는 삭제하면 됩니다.

<!--   <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>   -->
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_id' => 'myslidemenu', 'container_class' => 'jqueryslidemenu' ) ); ?>

웹 로딩 속도를 위한 고려사항

반드시 필요한 작업은 아니지만, 위와 같이 드롭다운 메뉴가 이상없이 작동한다고 해도 웹 페이지의 로딩 시간을 위해 고려해 봐야 할 것이 있습니다.

우선, Jquery 드롭다운 메뉴를 스타일링하기 위해 style.css 파일과 별도의 jqueryslidemenu.css 파일을 사용하고 있는데, 브라우저가 해당 사이트의 페이지를 보여주기 위해 열어야 할 파일이 많아지면 페이지가 열리는 시간이 느려집니다. 그래서 jqueryslidemenu.css 파일을 계정으로 업로드 하지 않고, jqueryslidemenu.css 내의 코드들을 style.css에 붙여넣기 합니다. 그 후에 header.php 부분에 붙여넣은 아래와 같은 코드는 없애 줍니다.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/jqueryslidemenu.css" />

아래와 같은 코드를 통해서 jquery.min.js 파일을 외부 사이트에서 불러오고 있는데, 만약 외부 사이트와의 접속이 느려지면 페이지가 로딩되는 시간이 오래 걸립니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

위의 주소로 접속을 해서 해당 파일을 다운로드 받은 후에 계정의 js 디렉토리로 업로드 합니다. 그 후에 아래와 같이 파일의 경로를 수정해 주면 페이지 로딩 속도를 빠르게 할 수 있습니다. 그런데 파일 크기가 꽤 커서 트래픽을 조금 잡아 먹긴 합니다.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

CSS 드롭다운 메뉴 만들기

CSS 드롭다운 메뉴는 Jquery에 비해 메뉴가 로딩되는 시간이 짧고, 브라우저에서 자바스크립트 기능을 꺼버려도 사용이 가능하다는 장점이 있지만, 하위 메뉴가 열리고 닫히는 시간이 조금 빠르기 때문에, 펼쳐진 하위메뉴로 마우스를 갖다대기도 전에 하위메뉴가 다시 닫혀버리는 경우가 종종 발생하는 단점이 있습니다.

하지만, Jqeury를 사용하면 메뉴가 닫히고 열리는 타이밍이 조절가능하며, 다양한 효과도 낼 수 있고 적용하기도 쉽기 때문에, 대부분의 드롭다운 메뉴는 자바스크립트를 이용한 Jquery를 사용합니다. 그렇다고 CSS를 대충 작성하면 브라우저의 자바스크립트 기능을 꺼버릴 경우 메뉴가 제대로 작동하지 않게 되므로 Jquery를 사용하더라도 기본적으로 CSS로 드롭다운이 되게 해 놓는 것이 좋습니다.

CSS Drop Down Menu의 종류

Jquery Dropdown 메뉴는 많았는데, CSS로 된 메뉴는 별로 없었습니다.

• Free CSS Drop-Down Menu Framework : 다단계 드롭다운 메뉴, IE6 브라우저를 제외한 대부분의 브라우저와 호환, IE6에서는 Jquery 사용
• CSS3 Dropdown Menu : CSS3를 사용한 멀티 드랍다운 메뉴, IE6을 제외한 대부분의 브라우저와 호환, IE6은 Jquery를 사용( 데모 )
• A cross-browser drop-down cascading validating menu : IE6을 포함한 대부분의 브라우저와 호환, 개인 웹사이트에 사용시에는 CSS 파일에 원작자의 웹 주소 표기해야 함, 상업용일 경우 원작자의 허락을 받아야 함.
• CSS Express Drop-Down Menus : 1 단계 드롭다운 메뉴( 데모 ), IE6을 포함한 대부분의 브라우저와 호환

HTML 마크업

대부분의 CSS 드롭다운 메뉴는 아래와 같은 마크업을 요구합니다. 워드프레스도 아래와 같은 마크업으로 메뉴를 출력합니다. 예외적으로 다른 마크업을 쓰는 방법도 있는데 그럴 경우 HTML 사이트에는 적용가능하지만 워드프레스는 마크업이 자동적으로 출력이 되기 때문에 사용이 힘듭니다.

<ul>
	<li><a href="./">Home</a></li>
	<li><a href="./">About Us</a>
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
		</ul>
	</li>
	<li><a href="./">Contact Us</a></li>
</ul>

위와 같이, 각각의 아이템(Home, Ahout Us, Contact Us)들은 각각 li 태그로 둘러싸야 되고, 각각의 아이템들을 ul 태그로 둘러싸서 하나의 메뉴 셋을 만들어야 합니다. 하위 메뉴 세트(History, Our Vision)도 ul 태그와, li로 만들면 되는데, 주의 할 것은 하위메뉴의 ul 태그가 상위 메뉴 아이템(About Us)의 li 태그 안에 위치해야 합니다.

즉, 아래와 같은 방식으로 메뉴를 구성하면 안됩니다.

	<li><a href="./">About Us</a></li>    <!-- </li> 태그 안쪽에 하위메뉴가 와야 됨 -->
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
		</ul>
	<li><a href="./">Contact Us</a></li>
</ul>

CSS 드롭다운 메뉴 적용하기

CSS 초보 분들을 위해서 위의 방법들 중에서 Free CSS Drop-Down Menu Framework 방법을 적용해서 메뉴를 만드는 과정을 알아보겠습니다.

HTML 마크업 확인

CSS가 레이아웃 깨짐없이 제대로 적용되기 위해서는 메뉴의 HTML 구조가 해당 방법과 일치해야 합니다. CSS Drop-Down Menu Framework는 HTML 구조에 대한 설명이 없기 때문에, 직접 HTML 문서를 에디터로 열어서 확인을 해 봐야 합니다.

우선, CSS Drop-Down Menu Framework 페이지 하단에 있는 다운로드 버튼을 클릭해서 해당 메뉴 파일들을 받아야 합니다. 다운로드 받은 압축파일을 풀어보면 free-css-drop-down-menu_v1.1.1 폴더안에 여러개의 데모 메뉴 문서들( advanced.html, adobe.com.html, flickr.com.horizontal.html, …)이 있습니다. 각각 클릭해보고 자신의 테마에 적용할 메뉴 문서파일을 결정합니다.

여기선, 아래와 같이 보이는 simple.horizontal.html 메뉴를 적용해 보겠습니다.

위의 메뉴의 HTML 구조를 알기 위해서 해당 메뉴 문서의 빈 곳에 마우스 오른쪽 버튼을 클릭한 후에 ‘소스보기’ 메뉴를 클릭합니다. (또는 해당 파일을 에디터로 직접 열어도 됩니다.) 그러면 아래와 같은 부분을 찾아볼 수 있습니다.

<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="./">Home</a></li>
	<li class="dir">About Us

	<!--    생  략   -->

	</li>
</ul>

<!-- / END -->

위 태그들을 보면, 앞에서 말한 하위메뉴 ul 태그들이 상위메뉴 아이템 li 태그 안에 위치해 있어서 HTML 사이트는 물론, 워드프레스에도 적용할 수 있다는 것을 알 수 있습니다.

워드프레스에 CSS 적용하기

simple.horizontal.html 메뉴의 마크업을 워드프레스에서 사용가능하다는 것을 확인했기 때문에, simple.horizontal.html 메뉴의 CSS를 워드프레스에 적용시킬 수가 있습니다. simple.horizontal.html 문서의 head 부분을 보면 아래와 같은 곳이 있습니다.

<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

위에서 보면 html 문서를 dropdown.css 파일과 default.css 파일로 스타일링 하고 있다는 것을 알 수 있습니다.(그 위에 있는 helper.css 파일은 메뉴와는 직접적인 상관이 없습니다.) 또한 브라우저의 버전이 IE7 미만(Less Than)이면 jquery.js 와 jquery.dropdown.js 자바스크립트를 실행하는 것도 알 수 있습니다.

위의 코드를 모두 워드프레스 테마의 header.php 파일의 head 부분의 적당한 곳에 붙여넣기 하면 해당 CSS와 자바스크립트를 워드프레스에서 사용가능하게 됩니다. 그런데 참조하는 내부 파일들이 많으면 사이트의 로딩속도에 안좋은 영향을 주므로 위의 두개의 CSS 파일은, 안의 내용을 복사해서 사용중인 테마의 style.css에 붙여 넣어 주고. jquery 파일들만 아래의 보기와 같이 header.php 파일의 head 부분의 적당한 곳(예: <?php wp_head(); ?> 바로 밑에 줄)에 복사해 주면 됩니다.

<?php wp_head(); ?>
<!--[if lt IE 7]>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.dropdown.js"></script>
<![endif]-->

위에서 주의할 점이 파일의 경로입니다. CSS 파일들은 style.css에 붙여넣기 했으므로 올릴 필요가 없고, Jquery 파일들은 계정으로 올려야 하는데, 만약에 해당 테마의 루트디렉토리( 예: wp-content/themes/yourtheme/ ) 밑에 있는 js/jquery/ 디렉토리에 올렸다면 경로는 아래와 같이 됩니다.

http://yoursite.com/wp-content/themes/yourtheme/js/jquery/jquery.js

위와 같은 경로를 테마의 루트 디렉토리를 출력하는 <?php bloginfo('template_directory'); ?> 템플릿 태그를 사용하면 아래와 같이 됩니다.

<?php bloginfo('template_directory'); ?>/js/jquery/jquery.js

그리고, default.css에 보면 li 엘리먼트에 필요한 이미지 파일들이 아래와 같이 background 이미지로 적용이 되어 있는데, style.css 파일이 있는 테마의 루트 디렉토리 밑에 있는 images 라는 하위 폴더에서 이미지를 참조하고 있습니다. 따라서 다운 받은 파일에 있는 nav-arrow-down.png, nav-arrow-right.png, nav-arrow-top.png, nav-arrow-left.png 파일들을, 테마의 루트 디렉토리 밑의 images라는 폴더로 업로드해 줘야 합니다. ( 참고 : 웹 문서의 경로)

background-image: url(images/nav-arrow-down.png);

id와 class name 일치시키기

테마의 style.css로 복사한 default.css와 dropdown.css의 내용이 실제 테마의 메뉴에 적용이 되게 하려면 복사한 CSS에서 사용된 id와 class가 워드프레스 HTML 태그에도 적용이 되어야 합니다.

‘Appearance>Editor’ 페이지에서 header.php 파일을 선택해서 <?php wp_nav_menu() ?> 부분을 찾습니다. 보통 아래와 비슷한 코드를 하고 있습니다. ( 구 버전의 테마일 경우 wp_list_pages 함수를 사용하고 있을 수도 있습니다. 그럴 경우에는 3.0 메뉴로 수정해줘야 합니다.)

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

1. 만약 기존의 메뉴 레이아웃을 사용하지 않고, simple.horizontal.html의 레이아웃을 그대로 사용하고 싶다면 아래와 같이, 원래 있는 wp_nav_menu를 주석처리한 후에 그 밑에 default.css와 dropdown.css에서 사용된 id와 class name을 적용해서 메뉴를 출력하면 됩니다. 메뉴가 의도한 대로 출력이 되면, 주석처리한 기존의 메뉴는 삭제하면 됩니다.

<!-- <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> -->
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'nav', 'menu_class' => 'dropdown dropdown-horizontal' ) ); ?>

위에서처럼 기존의 theme_location 파라미터는 그대로 써줘야 하고, ul tag의 id 를 출력하는 menu_id 파라미터에는 아래와 같이 nav를 사용하고,

'menu_id' => 'nav'

ul tag의 class를 출력하는 menu_class 파라미터에는 아래와 같이 dropdwon 과 dropdown-horizontal 메뉴를 사용하면 됩니다. 각각의 파라미터들은 쉼표로 구분하면 됩니다. 먄약 레이아웃이 깨진다면 기존의 css가 새로 만든 메뉴의 css에 영향을 주는 부분을 찾아서 수정해 줘야 합니다.

'menu_class' => 'dropdown dropdown-horizontal'

2. 만약 기존 메뉴의 레이아웃과 색상을 그대로 유지하면서 드롭다운 메뉴를 만들고 싶다면 되도록 기존의 id와 class를 유지해야 합니다. 만약 기존의 메뉴가 앞에서 예를 든 것과 같다면, 아래와 같이 ul 태그를 둘러싸고 있는 div 태그도 남겨줘야 합니다.

<!-- <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> -->
<?php wp_nav_menu( array(  'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu_id' => 'nav', 'menu_class' => 'dropdown dropdown-horizontal' ) ); ?>

만약 기존의 레이아웃이 아래와 같이 이미 ul 태그에 id와 class가 적용되고 있고 nav라는 id도 사용되고 있다면 고려해야 할 사항이 많아집니다.

<?php wp_nav_menu( array( 'container_class' => 'nav', 'theme_location' => 'primary', 'menu_id' => 'menu', 'menu_class' => 'menu' ) ); ?>

id 는 하나의 웹페이지내에서 한번만 사용을 하는 것이 좋습니다. 그런데 이미 'container_class' => 'nav'에서 ul 엘리먼트를 둘러싸고 있는 div 엘리먼트에 nav 아이디가 사용이 되었기 때문에 ul 엘리먼트에 nav 아이디를 사용하기 위해, div 엘리먼트의 아이디를 nav_wrap 과 같은 다른 이름으로 바꿔 주고 style.css에서 #nav 로 되어 있는 곳을 #nav_wrap으로 다 치환해 줘야 합니다. 치환해준 후에 실제 웹페이지 상에서 메뉴의 레이아웃이 깨지지 않고 원래대로 나온다면 제대로 바꿨다고 보면 됩니다.

div 엘리먼트의 id가 nav_wrap이므로 ul 태그의 아이디를 nav로 사용할 수 있습니다. 그런데, ul 엘리먼트에 menu라는 아이디가 사용이 되고 있기 때문에, menu를 nav로 바꾸어 줍니다. 그리고 style.css에서 #menu 라고 되어있는 부분을 #nav로 치환해줘서 기존의 레이아웃이 유지되도록 해야 합니다. 다 치환해준 후에 메뉴의 레이아웃이 이상이 없는지 실제 웹페이지상에서 확인을 해야 합니다.

그리고 ul 태그의 class name도 적용시켜야 하는데 id 와는 달리 웹페이지내에서 중복사용이 가능하므로 아래와 같이, 기존의 클래스명에 추가시켜 주면 됩니다.

'menu_class' => 'menu dropdown dropdown-horizontal'

그러면 기존의 wp_nav_menu 코드는 아래와 같이 됩니다.

<?php wp_nav_menu( array( 'container_class' => 'nav_wrap', 'theme_location' => 'primary', 'menu_id' => 'nav', 'menu_class' => 'menu dropdown dropdown-horizontal' ) ); ?>

위와 같이 하게 되면, 기존의 menu 클래스와 dropdown, dropdown-horizontal 클래스가 서로 충돌이 있어서 약간 레이아웃이 깨져 보이는데, 이건 붙여넣기한 CSS를 기존의 메뉴와 맞게 조금 수정해 줘야 합니다.

3. 마지막으로, 서브메뉴가 있는 li 태그에 사용되고 있는 dir class를 출력시켜야 합니다. 그런데, wp_nav_menu 파라미터 수정으로는 li 태그에 클래스명을 출력 할 수 없습니다. li 태그에 원하는 클래스명을 출력하기 위해서는 ‘Appearance>Menus’ 페이지의 오른쪽에서 해당 li 항목을 찾아 ‘CSS Classes’ 항목에 dir을 직접 입력해 줘야 합니다. 만약 해당 입력항목을 찾을 수 없다면, 상단에 있는 ‘Screen Options’ 버튼을 클릭한 후에, ‘Show Advanced Menu Properties ‘ 항목 밑에 있는 ‘CSS Classes’ 체크박스를 클릭해 주면 됩니다. ( 참고 : 메뉴의 li 태그의 class name 종류 )

붙여넣기한 CSS 수정하기

앞에서와 같이 id와 css를 똑같이 일치해줘도, 레이아웃이 약간 안 맞을 수 있습니다. 그건 각자 테마의 상황에 맞게 style.css로 붙여넣기한 css를 수정해야 합니다.

dropdown.css에서 복사한 부분은 드롭다운 메뉴를 만들기 위해 작성한 것으로 레이아웃이 안 맞는다고 해서 수정할 필요는 없습니다. 다만 메뉴바의 세로 높이를 조정할 필요가 있을 때 아래와 같은 부분을 찾아서 1.3을 다른 수치로 변경해 주면 됩니다.

line-height: 1.3em;

그 외에는 default.css에서 복사한 부분을 적당히 수정해 주면 됩니다.

펼쳐진 하위 메뉴의 가로 폭을 수정하기 위해서는 아래와 같은 부분을 찾아서 적당히 고쳐주면 됩니다.

width: 150px;

각각의 메뉴 링크에 있는 테두리를 수정하려면 아래와 같은 부분을 적당히 고쳐주면 되고 테두리를 완전히 없애고 싶으면 아래의 세줄을 지우면 됩니다.

	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;

그 외의 메뉴 색상들은 color 또는 background-color 라고 된 부분을 수정해 주면 됩니다.

하위메뉴가 다른 요소 밑에 감춰질 경우

간혹 펼쳐지는 하위 메뉴가 밑에 있는 다른 레아이웃 밑으로 들어가서 제대로 보이지 않는 경우가 발생할 수도 있습니다. 예를 들면 아래와 같은 HTML 구조로 테마가 구성되어 있을 때,

<div id="header">
	<?php wp_nav_menu(............) ?>
</div>

<div id="content">
	<!--    생략     -->
</div>

펼쳐진 서브 메뉴가 content 엘리먼트 밑으로 들어가 버려서 제대로 보이지 않을 수가 있습니다. 그럴 때는, 아래와 같이 style.css에서 content 엘리먼트보다, wp_nav_menu가 있는 header 엘리먼트의 z-index 값을 높게 해 줘야 합니다.

#header {z-index: 100;}
#content {z-index: 10;}

워드프레스 메뉴의 li 태그에 사용가능한 class name의 종류

기본적으로 워드프레스의 wp_nav_menu(); 함수는 아래와 같은 방식으로 자동적으로 클래스명을 출력합니다. 아래 코드들은 워드프레스 관리자 페이지에서는 확인이 안되고 실제 출력된 웹페이지에서 소스보기를 해야 확인이 가능합니다.

<ul>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-30"><a href="링크 주소">Home</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-31"><a href="링크 주소">Sample Page</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32"><a href="링크 주소">Uncategorized</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-38"><a href="링크 주소">테스트</a>

<ul class="sub-menu">
	<li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74"><a href="링크 주소">테스트 서브 메뉴 1</a></li>
	<li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41"><a href="링크 주소">테스트 서브 메뉴 2</a></li>
</ul></li>

<li id="menu-item-86" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-86"><a href="링크 주소">테스트 2</a></li>
</ul>

위의 코드는 ‘Home’, ‘Sample Page’, ‘Uncategorized’, ‘테스트’의 네 개의 메뉴가 있고, 그 중에 ‘테스트’ 메뉴의 하위에 ‘테스트 서브 메뉴 1′, ‘테스트 서브 메뉴 2′가 존재할 때 워드프레스가 출력하는 html 태그들 입니다.

아래는 li 태그에 출력되는 class name의 종류입니다.

• menu-item-숫자 : li 아이템의 id 와 class 명으로 사용이 됩니다. menu-item 뒤에 고유숫자를 붙여서 다른 li 태그의 클래스명이나 아이디명과 중복이 되지 않습니다.
• current-menu-item : li 태그내에 있는 링크가 현재 열려있는 웹문서의 주소와 동일할 때 출력이 됩니다.
• current_page_item : 현재 열려있는 웹문서가 페이지의 글이고, li tag 내에 있는 링크가 해당 웹문서의 주소와 동일할 때 출력이 됩니다.
• menu-item-home : 메뉴의 링크가 홈페이지로 가는 주소일 때 생성됩니다.
• menu-item : 모든 메뉴의 li tag에 붙는 공통 클래스명입니다.
• menu-item-type-custom : 워드프레스 관리자 페이지의 메뉴 페이지에서 ‘Custom Links’ 항목에 직접 링크를 입력한 경우에 menu-item-type 뒤에 ‘custom’이 붙고, ‘Pages’ 나 ‘Posts’ 항목에서 메뉴를 생성했을 때는 ‘post_type’ 이라는 클래스명이 붙고 ‘Categories’나 ‘Post Tags’에서 생성했을 경우에는 ‘taxonomy’가 클래스명에 붙습니다.( 3.0 메뉴 그림 참고 )
• menu-item-object : menu-item-object 뒤에는 post type의 라벨(이름)이 붙습니다. 워드프레스가 메뉴 페이지에 제공하는 기본적인 항목인 Custom Links, Pages, Category, Post Tags의 라벨은 각각 custom, page, category로 menu-item-type과 동일하며, ‘Post Tags’에서 메뉴를 추가했을 때에는 ‘post_tag’가 menu-item-object 뒤에 붙습니다.
• current-post-ancestor : 현재 열려있는 페이지가 포스트이고, 해당 포스트가 분류되어 있는 카테고리나 그 카테고리의 상위 카테고리들이 메뉴의 링크에 있을 때, 그 메뉴에 출력이 됩니다.
• current-post-parent : 현재 열려있는 페이지가 포스트이고, 해당 포스트가 분류되어 있는 카테고리들이 메뉴의 링크에 있을 때, 그 메뉴에 출력이 됩니다. 해당 포스트를 직접 포함하고 있는 카테고리에만 출력이 되며, 그 카테고리의 상위 카테고리에는 출력이 되지 않습니다.
• current-page-ancestor : 현재 열려있는 웹문서가 페이지 형식의 글이고, 해당 페이지의 parent page나 그 parent page의 상위 페이지들이 메뉴의 링크에 있을 때, 그 메뉴에 출력이 됩니다.
• current-menu-parent : 현재 열려있는 웹문서(페이지나 포스트 등의 문서의 타입에 관계없이)의 해당 포스트를 직접 포함하고 있는 카테고리나, 해당 페이지의 parent page로 가는 메뉴에만 출력이 됩니다.

그리고, 놓치기 쉬운 것이 하나 있는데, 위의 그림처럼 ‘Appearance>Menus’ 페이지 상단에 있는 Sreen Options 버튼을 클릭하면 CSS Classes 라는 체크박스가 있는데 그 체크박스를 클릭하면, 왼쪽 그림처럼 class를 입력할 수 있는 입력필드가 생겨서 해당 li 엘리먼트에 class 명을 지정할 수도 있습니다.

워드프레스 테마에서 한글 출력이 안될 때

웹 상에서 글꼴을 표현하는 방법은 여러가지가 있는데, 그 중에서 cufon이나 typeface는 웹폰트를 자바스크립트로 변환해서, 특정 태그 사이에 있는 텍스트를 자동으로, 자바스크립트로 변환한 웹폰트의 글꼴로 바꿔주는 역할을 합니다. 만약 그 태그 사이에 한글을 입력하면 한글은 아예 출력이 안나타나게 됩니다.

자신의 홈페이지의 실제 웹 페이지(관리자 페이지가 아닌) 상에서 마우스 오른쪽 버튼을 클릭한 후에 ‘소스보기’ 메뉴를 클릭하면 head 부분에 아래와 같이 cufon-yui.js가 들어간 자바스크립트 태그가 있으면 cufon을 사용한 경우 입니다.

<script src="cufon-yui.js" type="text/javascript"></script>

아래와 같이 typeface-0.15.js가 들어간 자바스크립트 태그가 있으면 typeface를 사용한 경우입니다.(0.15는 버전으로 다른 숫자로 되어 있을 수도 있습니다.)

<script src="typeface-0.15.js"></script>

위와 같은 경우에는 워드프레스 관리자 페이지의 ‘Appearance>Editor’ 메뉴를 클릭해서 header.php 파일에 있는 cufon 이나 typeface 단어가 들어간 자바스크립트 태그들을 지우면 됩니다.

cufon의 경우는 아래와 같은 코드들을 header.php 에서 지우면 됩니다. 두 번째 줄에 있는 Vegur_300.font.js는 cufon이 Vogur라는 폰트 파일을 js 파일로 생성한 것으로, 폰트_숫자.font.js 형식으로 된 파일이라면 Cufon 파일이라고 생각하시면 됩니다.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
			Cufon.replace('h1');
		</script>

Typeface가 사용된 경우도 아래와 같이 header.php 파일에 typeface가 들어간 자바스크립트 태그들을 지우면 됩니다.

<script src="typeface-0.15.js"></script>
<script src="helvetiker_regular.typeface.js"></script>

위 코드들을 지우고 한글 출력이 되면 이쁜 글꼴을 사용할 수 없게 되어서 style.css 에서 다시 영어와 한글 글꼴들을 스타일링 해줘야 될 겁니다.

무료호스팅 라온넷닷컴 바로가기

무료 호스팅 라온넷닷컴

무료 호스팅 선택시 한가지 알아야 할 것은, 지금 아무리 좋은 서버 환경을 제공한다 하더라도 갑자기 운영이 중단되거나 서버의 속도가 느려진다던가 하는 일이 발생할 수 있습니다.

특징

• 하드 용량 : 200M
• 트래픽 : 300M/월
• EUC-KR 및 UTF-8 서버 중에서 선택 가능
• 접속 속도도 괜찮은 편임
• 관리자 허가 절차 없고 전화 인증 과정만 거치면 실시간 자동 세팅으로 바로 워드프레스 설치 가능
• 기본적인 워드프레스 사용에 아무 불편함이 없음
• 게시판이 활성화 되어 있음.

서버 사양

• OS Linux
• Apache_2.2.x / php 4.4.x php 5.x
• GD 2.0.x, Zend Optimizer 2.4.X 이상 지원
• MySQL 4.0.x, 4.1.x, 5.0.x / Perl (경로:/usr/bin/perl)
• Sendmail, GCC (상황에 따라 지원), make (상황에 따라 지원), C/C++ (상황에 따라 지원)
• POP3, IMAP, 웹메일 (모두 무료)
• 웹방화벽(modsecurity)
• 2차 도메인 ‘ID.raonnet.com’ 제공
• 무료 웹 프로그램 설치 지원
• 실시간 트래픽 확인, MySQL DB관리기 (yoursite.com/myadmin), weblog, ftplog
• SSH 지원, telnet 미지원, FTP 지원

주의 : 저작권 위반시 예고 없이 사이트가 차단될 수 있습니다.

여기서는 잘못 입력해서 관리자 페이지로 아예 접속이 안될 경우에 해결하는 방법에 대해서 알아 보겠습니다. 아래의 방법들은 도메인 네임으로 인해 접속이 안 되는 다른 경우(사이트 이전을 하면서 도메인 네임도 같이 변경된 경우)들에도 유용합니다.

참고 사이트 : Changing the Site URL

주의 : 멀티 사이트에서는 사용할 수 없는 방법입니다. 그리고 아래의 방법들은 임시 방편이기 때문에, General Settings에서 정상적으로 URL이 표시되면 수정했던 wp-config.php 또는 functions.php 파일을 원상태로 돌려 주는게 좋습니다.

WordPress Address 또는 Site Address 변경하기

만약 Site(Blog) Address가 원래 아래와 같이 되어있고,

http://yoursite.com

위의 주소를 아래와 같이 바꾸거나,

http://yoursite.com/blog

또는. (도메인네임 앞에 www를 붙이는 것을 추천하진 않지만) 아래와 같이 해도 이상없이 동작을 합니다.

http://www.yoursite.com/blog

다만, 저장 버튼을 누르면 아래와 같은 경고 페이지가 한번 뜹니다. 새로 고침하면 설정대로 동작을 합니다.

Warning: is_writable() [function.is-writable]: open_basedir restriction in effect. File(/) is not within the allowed path(s): (/tmp/:/DATA/myid/) in /DATA/myid/public_html/wp-admin/includes/misc.php on line 133

Warning: Cannot modify header information – headers already sent by (output started at /DATA/myid/public_html/wp-admin/includes/misc.php:133) in /DATA/myid/public_html/wp-includes/pluggable.php on line 897

하지만 WordPress Address를 아래와 같이 바꾸면,

http://yoursite.com/blog

404 에러가 뜨면서 접속할 수가 없게 됩니다. 물론 이 경우도 루트 디렉토리에 있는 모든 워드프레스 파일과 폴더들을 blog 디렉토리로 옮기면 다시 접속이 가능합니다. 만약 오타가 나서 WordPress URL에 아래와 같이 입력이 되었다면, 도메인 네임자체가 달라지기 때문에 아예 접속이 안됩니다.

http://yoursit.com

도메인 네임을 잘못 입력했거나 변경했을 경우에는 아래와 같은 방법을 사용해야 접속을 할 수 있습니다.

Relocate Method

wp-config.php 파일을 열어서 아래와 같은 코드를

define('RELOCATE',true);

적당한 곳, 예를 들면 아래와 같이 wp-debug 밑에 붙여 넣기를 합니다.

define('WP_DEBUG', false);
define('RELOCATE',true);

위와 같이 하면, Database의 주소도 자동적으로 wp-config.php에 입력한 내용으로 저장이 됩니다. 이상없이 로그인 되는 것을 확인한 후에는 functions.php에 입력한 내용은 지우는 것이 좋습니다.

functions.php 수정을 통해서 주소 문제 해결하기

현재 활성화된 테마의 functions.php에 아래와 같은 두 줄의 코드를 추가해서 문제를 해결할 수도 있습니다.

update_option('siteurl','http://example.com/blog');
update_option('home','http://example.com/blog');

위의 코드를 fuctions.php 파일의 맨 위줄에 있는 php 시작태그 <?php 바로 뒤에서 엔터를 쳐서 빈 줄을 만들고, 거기에 두 줄의 코드를 붙여넣기 합니다. 그러면 아래와 같은 모습이 됩니다.

<?php
update_option('siteurl','http://example.com/blog');
update_option('home','http://example.com/blog');

만약 해당 테마에 functions.php 파일이 없다면, 메모장이나 notepad++ 같은 에디터에서 빈 문서를 만들고 위의 세줄의 코드를 그대로 붙여넣기 한 후에 파일이름을 functions.php 로 하고 저장을 합니다. 만든 파일을 해당 테마의 디렉토리( 예: wp-content/themes/yourtheme/ )에 업로드 하면 됩니다.

위와 같이 하면, Database의 주소도 자동적으로 functions.php에 입력한 내용으로 저장이 됩니다. 이상없이 로그인 되는 것을 확인한 후에는 functions.php에 입력한 내용은 지우는 것이 좋습니다.

wp-config.php 파일에서 define 으로 해결하는 방법

wp-config.php 파일을 열어서 아래와 같이 두 줄을 입력해 주면 됩니다.

define('WP_HOME','http://yoursite.com');
define('WP_SITEURL','http://yoursite.com');

주의할 점은 위의 코드를 wp-config.php 파일의 너무 아래 쪽에 붙여 넣으면 안되고, 아래와 같이 WP_DEBUG 바로 밑에 정도 쯤에 붙여 넣기 해야 합니다.

define('WP_DEBUG', false);
define('WP_HOME','http://yoursite.com');
define('WP_SITEURL','http://yoursite.com');

앞의 두 가지 방법은 데이터베이스의 주소가 맞게 변경이 되었기 때문에 추가한 코드를 삭제하는 것이 좋지만, 위 방법은 접속만 될 뿐 데이터베이스에 잘못된 주소는 수정이 안되고 그대로 남아 있기 때문에 해결 방법으로는 부적당합니다. 만약 위의 두 방법이 안 될 경우 시도해 보는 것이 좋습니다.

직접 데이터베이스를 수정해서 주소 문제 해결하기

phpMyAdmin에 직접 접속해서 해당 값을 수정해서 해결할 수도 있는데, 포스트가 너무 길어지기 때문에 다음에 따로 포스팅을 하겠습니다.

Hook과 Action의 개념과 사용법

Hook 이란?

참고 : Plugin API

Hook은 템플릿 내의 공간적 특정 위치(head 태그 사이, footer, 포스트 제목 위…) 또는 워드프레스가 동작하는 시간적 특정 지점(포스트 발행 시점, 댓글이 달리는 시점…)에서 실행이 됩니다.

Hook들은 템플릿 파일내에도 있고 워드프레스가 어떤 동작들을 할 때에도 있습니다. 플러그인 개발자나 테마 제작자 또는 유저들이, 자신이 원하는 시점이나 위치에 있는 Hook에게, 실행하고 싶은 함수를 알려주면, 각각의 Hook은 자신이 실행될 때 자신에게 걸려있는 그 function들을 찾아서 실행을 합니다.

Hook의 종류 – Action과 Filter

Hook은 Action Hook과 Filter Hook이 있는데, 줄여서 각각 Action, Filter 라고도 부릅니다. 워드프레스의 특정 동작 시점이나 템플릿내의 특정 위치에서, 어떤 동작을 실행하고 싶을 때는 Action을 사용하고, 데이터베이스나 방문자의 브라우저에 보내어지는 텍스트 타입의 데이터를 변형하거나 제어하고 싶을 때는 Filter를 사용합니다.

Action과 Filter에 대해서 말로 설명하는 것보다는 실제로 어떻게 사용이 되고 있는지를 알아보는 것이 더 이해하기가 쉽습니다. 여기서는 Action에 대해서만 알아 보겠습니다.

Action Hook의 예 – wp_head()

Action은 워드프레스가 자체적으로 제공하는 것이 있고 직접 만들어서 사용할 수도 있습니다. 워드프레스가 제공하는 Action Hook 중에 템플릿 상에서 간단하게 확인 가능한 것으로 header.php에서 사용되는 wp_head();와 footer.php에 사용되는 wp_footer();를 예로 들 수가 있습니다.

Twenty Ten 테마의 header.php 파일을 열어보면 아래와 같이 </head> 태그 바로 위에 wp_head();가 사용된 것을 볼 수가 있습니다.

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

위의 코드의 wp_head(); 부분에서 출력과 관계없는 주석문을 빼면 아래와 같은 코드가 됩니다.

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>

실제 웹페이지 상에서 마우스 오른쪽 버튼을 클릭해서 ‘소스보기’를 한 것과, 위의 코드를 비교해 보면 wp_head();부분이, 아래 스크린샷의 보라색 박스안에 있는 HTML 태그들을 출력한 것을 알 수 있습니다.

하지만, 위의 코드들을 출력하기 위해서 wp_head(); Action Hook이 직접적으로 하는 역할은 없습니다. 단지 </head> 태그 바로 윗 줄이라는 코드상의 공간적인 위치(Place holder)를 차지하면서, wp_head(); Hook이 실행되면 훅은 그 시간적, 공간적 지점에서 자신에게 걸려있는 add_action 함수들을 찾아서 차례로 실행하는 단순한 역할을 합니다. 만약 add_action 함수가 meta 태그나 link 태그 들을 출력하는 함수들을 호출한다면 위의 스크린샷처럼 그 지점에 메타 태그와 링크 태그들을 출력합니다. wp_footer(); Action도 이름만 다를 뿐이지 하는 역할은 똑같습니다.

위에 출력된 코드들은 wp_head();가 실행될 때, 워드프레스가 wp_head(); Action에 걸어놓은 funtion들을 통해서 출력된 코드들입니다. 활성화된 테마나 플러그인들이 wp_head();를 사용할 경우에는 위의 코드외에도 추가적인 코드가 더 있을 수도 있습니다.

참고 : 워드프레스가 제공하는 Action Hooks

add_action – Action이 실행될 때 함수 호출하기

add_action은 훅에게 어떤 function을 호출해야 하는지를 알려 주는 역할을 하는데, 하나의 Hook에 여러개의 add_action을 걸 수도 있습니다.

<?php add_action( $tag, $function_to_add, $priority, $accepted_args ); ?>

• &tag : function을 걸고 싶은 Action Hook의 이름. 필수 파라미터.
• $function_to_add : 액션이 실행될 때 호출할 function 이름. 필수 파라미터.
• $priority : 하나의 액션에 여러개의 funcion들이 호출될 때, 해당 function의 실행 우선 순위. 기본 값은 10이고 기본값보다 숫자가 낮으면 우선순위가 높고, 높으면 우선순위가 낮음. 생략 가능 파라미터
• $accepted_args : 액션에 사용되는 함수가 가지고 있는 인수의 갯수. 기본값은 1. 생략 가능 파라미터

예를 들면, 야후 같은 곳에 자신의 홈페이지를 등록할 때, 자신의 소유임을 인증받기 위해서 head 태그 사이에 아래와 같은 메타 key를 입력할 것을 야후에서 요청을 합니다.

<meta name="y_key" content="7fce761aa2a0cebb" />

그러면 우선 아래와 같이 functions.php에서 메타키를 출력하는 function을 만들고, 만든 function을 add_action을 통해서 호출을 하게 해야 합니다.

function metakeys () {
	echo '<meta name="y_key" content="7fce761aa2a0cebb" />'."\n";
}
add_action('wp_head','metakeys');

위에서 보면 metakeys라는 function은 echo를 통해서 해당 메타태그를 출력하는 역할을 합니다. 그리고 add_action은, wp_head Action Hook이 실행될 때 metakeys라는 function을 호출해서 실행을 합니다. 아래 스크린샷을 보면 보락색 박스로 표시된 곳에 야후 메타키가 출력되는 것을 확인할 수 있습니다.

Twenty Ten 테마의 functions.php 파일을 열어보면 아래와 같은 몇 개의 add_action 함수들을 찾아 볼 수 있습니다.

add_action( 'after_setup_theme', 'twentyten_setup' );
add_action( 'widgets_init', 'twentyten_widgets_init' );
add_action( 'widgets_init', 'twentyten_remove_recent_comments_style' );

위의 코드를 보면, Twenty Ten 테마가 after_setup_theme, widgets_init, widgets_init 이라는 훅에 어떤 function들을 호출하도록 한 것을 알 수 있습니다. 하지만 wp_head();와 wp_footer(); 훅과는 달리, 위의 훅들은 워드프레스 코어 파일에 있기 때문에 워드프레스 관리자 페이지에서는 직접 확인은 불가능합니다.

remove_action – Action에서 실행되는 function 제거하기

Action에서 실행되는 어떤 function을 제거하려면 remove_action을 사용합니다.

예를 들면, 워드프레스는 head 태그 안에 아래와 같이 generator 태그를 사용해서 워드프레스 버전을 출력하고 있습니다.

<meta name="generator" content="WordPress 3.1.3" />

보안상의 이유나 기타 이유로 meta generator 태그를 보이고 싶지 않다면 아래 코드를 functions.php에 입력해 주면 됩니다.

remove_action( 'wp_head', 'wp_generator' );

do_action – 직접 Action 만들기

필요한 HTML 태그나 php 코드들을 템플릿 파일들 내부에 직접 삽입하면 템플릿이 매우 복잡해지고 관리하기가 번거로울 수 있습니다. 템플릿 파일에는 한 줄의 hook 함수만 넣고, 필요한 코드들은 functions.php 파일에서 function을 걸어주는게 편리합니다.

action은 아래와 같이 do_action을 통해서 만들 수 있습니다.

<?php do_action('my_hook'); ?>

위의 php코드는 my_hook 이라는 훅을 생성하는 역할을 하며, 위 코드를 템플릿 파일내의 html 태그 사이에 삽입을 하면 됩니다.

하지만 보통은, 위와 같이 바로 템플릿 파일내에 넣지 않고 아래와 같이 do_action 함수를 다른 function에 넣어서 아래와 같이 해서 functions.php에 만듭니다.

function my_hook() {
	do_action('my_hook');
}

위에서, 생성된 Hook의 이름과 function 이름은 달라도 되지만 보통은 알아보기 쉽게 같은 이름으로 사용을 합니다. 아래과 같이 functions.php에서 만든 function을 아래과 같이 템플릿 내의 HTML 사이의 적당한 곳에서 Hook으로 사용을 합니다.

<?php my_hook(); ?>

실제로, Hook을 이용해서 hello world! 라는 포스트 제목 밑에 div 태그로 둘러싸인 간단한 안내문구를 출력해 보겠습니다. functions.php 제일 밑 endif; 밑에 아래와 같은 코드를 붙여넣기 합니다.(잘못될 경우를 대비해서 functions.php 파일을 자신의 컴퓨터로 백업 받는 것이 좋습니다. 제대로 작동이 안되면 계정으로 다시 덮어쓰기 하면 됩니다.)

function notice_hook() {
	do_action('notice_hook');
}
function my_notice() {
	if (is_single('hello-world')) { ?>
	<div class="notice"><p>훅을 통해서 입력한 안내문입니다.</p></div>
	<?php }
}
add_action('notice_hook', 'my_notice');

그 후에 단일 글의 포스트를 출력하는 loop-single.php 파일을 열어서 적당한 곳에 아래와 같이 Hook을 넣어줍니다.

</div><!-- .entry-meta -->
<?php notice_hook(); ?>
<div class="entry-content">

Hello world! 포스트 페이지를 열어보면 아래와 같이 제목 밑에 입력한 내용이 출력되는 것을 알 수 있습니다.

style.css 에서 보기좋게 스타일링 해 주면 됩니다.

Auto FTP – Connection Information 페이지 제거 플러그인

Connectin Information 페이지는 계정의 FTP 정보를 입력하는 곳인데, 아래 그림과 같은 모습을 하고 있습니다.

Hostname 에는 http:// 없이 FTP 주소(보통은 도메인 네임)만 입력하면 되고, FTP username 과 FTP password 에는 각각 FTP 아이디와 비밀번호를 입력하면 됩니다.

간단한 절차이긴 하지만, FTP 정보 입력없이 테마나 플러그인을 설치하다가 FTP 정보를 요구하는 호스팅 업체를 사용하게 되면 은근히 불편하게 느껴집니다.

Auto FTP라는 아주 간단한 플러그인을 설치하면 Connection Information 페이지가 더 이상 안 뜨게 할 수 있습니다.

다운로드 : Auto FTP

사용법은 간단합니다. 설치하고 활성화하면 ‘Settings’ 메뉴에 ‘Auto FPT’ 메뉴가 생기는데 거기에서 FTP 정보를 입력해주면 됩니다.

워드프레스의 작동 순서

1. 방문자가 사이트의 특정 페이지(URL)로의 접속을 요청하면, WordPress는 wp-config.php, wp-settings.php 와 같은 몇 개의 코어파일을 실행함.
2. 워드프레스가 로드되고 활성화된 플러그인들이 초기화됨.
3. 각 나라의 언어로 번역된 파일이 있으면 실행하고, 현재 활성화된 테마의 functions.php 파일을 실행함.
4. wp-includes/functions.php 파일에 있는 wp() function을 실행함. wp() function은 wp-includes/classes.php 파일에서 정의된 $wp->main() 을 호출하는데 이것은 워드프레스에게 아래와 같은 것들을 하게함.
   1. 요청한 URL을 Rewrite rule과 비교해서 해당되는 페이지가 있으면 그 변수들의 값을 $wp->query_vars 에 저장하고, 해당하는 페이지가 없으면 404 에러로 간주함.
   2. Conditional Tags로 사용되는 모든 is_ 변수들을 설정함.
   3. 해당 페이지의 글 목록을 얻기위해, $wp->query_vars 에 저장된 값들을 MySQL database query로 변환해서 쿼리를 실행함. 쿼리를 실행해서 찾은 글 들을, Loop 문에 사용하기 위해서 $wp_query object에 저장함.
   4. 404 에러가 있으면 404 페이지를 출력함.
   5. 해당 블로그의 HTTP 헤더를 전송함.
   6. Loop 문에 사용할 일부 변수들을 설정함.
5. 페이지 우선 순위에 따라, 요청된 URL에 해당되는 템플릿 파일을 출력함. 대신에 wp-rss2.php과 같은 피드 파일이 출력될 수도 있음.
6. 일반적으로 템플릿 파일이나 피드 파일에는, 글 목록(예: 메인페이지, 카테고리 페이지 …)이나 하나의 글(예 : page 글, 단일 글)을 출력하기 위해 Loop 문이 있음.
7. Loop 문이 실행되면, 출력될 글 목록(예: 메인페이지, 카테고리 페이지 …)이나 하나의 글(예: page 글, 이나 단일 글)에 필요한 permalink, 작성자, 작성 날짜 등등의 정보도 같이 출력됨.

위에서 보면 플러그인과 functions.php의 실행순서가 각각 2번째, 3번째로 매우 빨리 실행되고 있습니다. 그렇기 때문에 플러그인이나 function.php가 잘못되면 관리자 접속 주소로도 아예 접속을 못하는 경우가 많습니다.

그리고 위의 순서 외에도 action의 실행 순서를 알고 있으면 워드프레스가 어떤 순서로 구동이 되는지 이해하는데 도움이 될 것 같습니다.

사진 블로그나 갤러리에 적합한 유료 테마들

유료는 특히, 해당 테마 폴더 외에도 여러가지 설치 안내 파일이나 포토샵 파일 또는 플러그인 폴더가 포함이 되어 있을 수 있으므로 압축을 풀어서 설명을 보고 설치하는 것이 좋습니다.

테마 설치나 썸네일 사용이 생소한 분들은 아래 링크를 참조하기 바랍니다.

• 테마 설치 방법 및 주의사항
• 썸네일 사용법
• Custom Fileds 사용법

다운로드 사이트를 클릭하면 그 페이지에 ‘live preview’ 또는 ‘live demo’ 와 같은 링크나 버튼이 있는데 클릭하면 사이트에 실제로 적용된 모습을 볼 수 있습니다.

ePhoto

[다운로드 사이트] , [DEMO PAGE]

Photo Nexus

[다운로드 사이트] , [DEMO PAGE]

Widescreen

[다운로드 사이트] , [DEMO PAGE]

Modularity

[다운로드 사이트] , [DEMO PAGE]

Photo Workshop

[다운로드 사이트] , [DEMO PAGE]

Dandelion

[다운로드 사이트] , [DEMO PAGE]

KIN

[다운로드 사이트] , [DEMO PAGE]

Photographer Dream

[다운로드 사이트] , [DEMO PAGE]

Gallerific

[다운로드 사이트] , [DEMO PAGE]

Deep Focus

[다운로드 사이트] , [DEMO PAGE]

Photocrati

[다운로드 사이트] , [DEMO PAGE]

참고 : Photocrati 테마는 패키지 형태로서, 하나의 테마에 60 가지 형태의 레이아웃을 제공.

Accentuate

[다운로드 사이트] , [DEMO PAGE]

Flashlike Photographer

[다운로드 사이트] , [DEMO PAGE]

Shutterspeed

[다운로드 사이트] , [DEMO PAGE]

Delicious Photography

[다운로드 사이트] , [DEMO PAGE]

Portfolio Theme

[다운로드 사이트] , [DEMO PAGE]

Depth

[다운로드 사이트]

Inkdrop

[다운로드 사이트]

Photoland

[다운로드 사이트]

Sensor

[다운로드 사이트]

PhotoSquares

[다운로드 사이트]

갤러리, 사진 블로그용 무료 테마

아래에 있는 갤러리 테마들을 다운받으시려면 다운로드 사이트 링크를 클릭해서 그 페이지에 있는 Download 링크나 버튼을 찾아서 클릭하시면 됩니다.

다운로드 받은 파일의 압축을 풀면, __MACOSX 폴더나 psd 파일과 같이 테마 설치와 직접적 관련이 없고 용량만 차지하는 것이 있을 수 있고, 테마에서 사용되는 플러그인 폴더도 있을 수도 있습니다. 플러그인 폴더 안에 있는 플러그인 폴더들은 계정의 wp-content/plugins/ 디렉토리로 업로드 해야 하고, __MACOSX 폴더나 psd 파일들은 올리실 필요가 없습니다. 해당 테마 폴더만 wp-content/themes/ 디렉토리로 올려야 정상적으로 작동합니다. (테마 설치방법)

그리고, 이런 형태의 테마들은 추천 이미지나 custom fileds의 기능을 이용해서 사진들을 포스트에 첨부합니다.

Unstandard

[다운로드 사이트], [데모]

참고 : unstandard-2.0.1 폴더밑에 색상별로 여섯개의 폴더가 있는데 unstandard 폴더는 parent theme으로 반드시 업로드 해야하고, 색상을 바꾸고 싶을 때는 다른 다섯개의 폴더 중 선택해서 올린 후에 그 테마를 활성화하면 됩니다.(parent theme과 child theme)

Reflection

[다운로드 사이트], [데모]

Gallery 1.2

[다운로드 사이트], [데모]

참고 : Thematic 테마가 설치되어 있어야 사용가능한 child theme

Grace WordPress Photoblog Theme

[다운로드 사이트], [데모]

Snapshot

[다운로드 사이트]

AutoFocus

[다운로드 사이트], [데모]

Free Photo Gallery

[다운로드 사이트], [데모]

참고 : photo-gallery-dark-free 테마와 photo-gallery-light-free 테마 두 개가 있음, 푸터에 있는 백링크 삭제 불가.

Photoview v11

[다운로드 사이트]

참고 : photoview 폴더만 업로드해야 함, GPL 라이센스, 설치방법은 readme.html 참조

Simply Delicious

[다운로드 사이트], [데모]

Fotofolio Landscape

[다운로드 사이트], [데모]

참고 : 개인용도에 한하여 무료이며, 상업적인 용도나 그 외 용도는 유료

Big Square

[다운로드 사이트], [데모]

참고 : 개인적인 용도에 한하여 무료

WP Grain

[다운로드 사이트]

참고 : GPL License, Yet Another Photoblog 플러그인 필요, tgz 압축파일, README.txt 참조

Photo Blog

[다운로드 사이트], [데모]

Photo Biyori

[다운로드 사이트], [데모]

WORK A HOLIC

[다운로드 사이트], [데모]

참고 : 무료회원으로 가입 필요. 다운로드 사이트에서 ‘DOWNLOAD NOW’ 버튼을 클릭한 후에, ‘Freebies’ 라디오버튼을 클릭하고, 그 아래에 있는 ‘Add your details’ 필드중 별표 항목 입력후에 Continue 선택하면 가입완료됨.

F8 static

[데모]

참고 : Workaholic 테마를 배포하는 사이트에서 회원가입 필요

Full Screen

[데모]

참고 : Workaholic 테마를 배포하는 사이트에서 회원가입 필요

Mansion

[데모]

참고 : Workaholic 테마를 배포하는 사이트에서 회원가입 필요

Modularity Lite

[데모]

참고 : Workaholic 테마를 배포하는 사이트에서 회원가입 필요

Visualization

[데모]

참고 : Workaholic 테마를 배포하는 사이트에서 회원가입 필요

wpFolio

[다운로드 사이트], [데모]

참고 : pdf 파일 설명 참조

BlueBubble 3.4

[다운로드 사이트], [데모]

Creative by Nature

[다운로드 사이트], [데모]

Irresistible

[다운로드 사이트]

Portfolio Press

[다운로드 사이트], [데모]

Desk Space

[다운로드 사이트], [데모]

Portfolium

[다운로드 사이트], [데모]

Imbalance

[다운로드 사이트], [데모]

Paragrams

[다운로드 사이트], [데모]

Minimatica

[다운로드 사이트], [데모]

WordPress Admin Notepad Plugin

WordPress Admin Nodtepad는 워드프레스 관리자 페이지 상단에 Notepad처럼 텍스트를 입력하고 저장할 수 있는, 아래 그림과 같은, 박스형태의 입력창을 만들어 주는 플러그인입니다. 단순히 알림판(Dashboard) 페이지 위쪽에만 있는 것이 아니고, 포스트 메뉴, 페이지 메뉴, 플러그인 메뉴, 테마 메뉴와 같은 관리자의 모든 페이지 위쪽에 다 나타나게 됩니다.

일정이나 자주 사용하는 코드 또는 참고 사이트등을 저장해 놓을 수 있고, 항상 모든 페이지 위쪽에 있기 때문에 페이지나 포스트를 작성할 때 편리하게 사용할 수 있습니다.

사용법

설치하고 활성화한 후에, ‘Settings>WP Admin Notepad’ 메뉴의 옵션에서 다음과 같이 설정해 주면 됩니다.

• Disable Notepad Toggle at top right corner? – 체크 해제
• Save the state of Notepad? – 선택
• Current Saved State of Notepad? – Visible 선택, 만약 사용중에 페이지 상단에 있는 ‘Hide Notepad’ 버튼을 클릭하게 되면 입력창이 사라지게 되는데 다시 보이게 하려면 여기서 다시 ‘Visible’로 선택해 줘야 합니다.

워드프레스 댓글에 아바타 이미지 넣는 방법과 크기 조정

참고 사이트 : Using Gravatars

아바타 이미지 넣기

1. gravitar.com에 접속해서 ‘Sign Up’ 메뉴나 ‘Get your Gravatar today’ 버튼을 누릅니다.

2. 이메일 주소를 입력하는 곳에 현재 워드프레스에서 사용중인 이메일 주소를 입력하고 ‘Sign up’ 버튼을 클릭합니다. 입력한 주소로 확인 메일을 보냈다는 ‘Confirmation email sent’ 라는 메세지가 뜰 겁니다.

3. 조금 전에 입력했던 이메일주소로 로그인해서, gravitar.com에서 보낸 이메일을 열어서 ‘To activate your account, simply click on the link below………’ 라고 되어 있는 문구 밑의 링크를 클릭합니다.

4. 이메일에 있는 링크를 클릭하면, 아이디와 비밀번호를 입력하는 페이지로 이동이 되는데, 만들고 싶은 아이디와 비밀번호를 입력하고 ‘Sign up’ 버튼을 클릭합니다.

5. 아래 그림이 Gravitar에 로그인된 스크린샷입니다. ‘Add one by clicking here’ 버튼을 누르거나 페이지 상단의 ‘my account>add an image’를 클릭해서 아바타로 사용하고 싶은 이미지를 업로드합니다.

6. 업로드한 이미지를 적당히 수정하고, 등급을 지정하면 됩니다. G 등급으로 지정하면 사용에 아무런 문제가 없습니다.

7. 위의 그림에서 등록된 이메일 옆의 아바타 이미지가, 업로드한 이미지로 바뀌면 등록이 완료된 것이고 몇 분 정도 지나면 댓글에 아바타 이미지가 뜹니다.

avatar 크기 바꾸기

아바타 이미지 사이즈는 comments.php 파일에 있는 wp_list_comments();에서 바꿀 수가 있습니다. 만약 48px의 이미지로 하고 싶다면 아래와 같이 하면 됩니다.

wp_list_comments('avatar_size=48');

다음과 같이 사용이 되기도 합니다.

<?php wp_list_comments(array('avatar_size' => '48', 'type' => 'comment')); ?>

만약, <?php wp_list_comments(); ?>에 사이즈를 입력했는데도 효과가 없으면 comments.php나 funcions.php파일에 get_avatar();를 사용하고 있지 않은지 찾아봐야 합니다. Twenty ten 테마의 경우엔 functions.php 파일에 아래와 같이 해서 아바타 사이즈를 지정하고 있습니다. 아래 코드에서 32를 원하시는 크기의 숫자로 바꾸시면 됩니다.

<?php echo get_avatar( $comment, 32 ); ?>

이미지 추가 메뉴와 추천 이미지 메뉴

워드프레스상에서 이미지들을 관리하려면 ‘Media>Add new’ 메뉴나, 에디터 창 위에 있는 ‘이미지 추가> 컴퓨터에서(From Computer)’ 탭을 통해서 워드프레스로 업로드한 파일이어야 합니다. FTP로 직접 계정에 올린 파일이나 외부 이미지 주소는 관리를 할 수 없습니다.

이미지 추가(Add an image)

• 제목(Title) – 필수항목으로 img 와 a 태그의 title 속성으로 사용이 됩니다. 이미지에 마우스를 올리면 입력한 항목이 제목으로 나옵니다.
• 대체 텍스트(Alternate Text) – img 태그의 alt 속성으로 사용이 됩니다. 해당 이미지에 연결이 안 될 경우 x 박스로 이미지가 나오는데, 그럴 경우 x 표시 옆에 제목으로 출력이 됩니다. 사실은 ‘대체 텍스트’보다 더 중요한 항목이며 반드시 입력하는 것이 좋습니다.
• 캡션(Caption) – 대부분의 테마는 이미지 밑에 제목이 나오도록 되어 있습니다. 그 부분에 출력이 됩니다.
• 설명(Description) – 이미지에 대한 설명입니다. Attachment 페이지의 이미지 하단에 설명으로 나옵니다.
• 링크 ID(Link URL) – 이미지를 클릭했을 때 이동할 페이지 주소를 입력하는 곳입니다. 비워두면 이미지만 나옵니다.
• 파일 URL(File URL) – 워드프레스나 테마의 영향을 받지 않는 실제 계정의 이미지 주소입니다.
• 글 URL(Post URL) – 워드프레스는 업로드한 각각의 이미지를 포스트와는 별개로, Attachment 페이지에서 관리하는데 그 주소입니다.
• 정렬(Alignment) – 포스트내에서 이미지가 어디에 위치할 지를 선택하는 항목입니다.
• 크기(Size) – 사진의 크기를 지정할 수 있습니다. 크기는 미디어 설정에서 입력한 크기로만 선택이 가능합니다.(참고 : 이미지 크기에 대한 이해)
• 본문 삽입(Insert into Post) – 클릭하면 설정한 크기와 위치로 포스트에 삽입이 됩니다.
• 주 이미지로 사용(Use as featured image) – 해당 포스트의 썸네일로 사용이 됩니다.(참고 : 썸네일 사용법)

워드프레스는 2.9 버전부터 썸네일 이미지(Thumbnail Image)라고 해서, 각각의 포스팅마다 대표 이미지를 설정할 수 있는 기능을 추가했습니다. 그리고 3.0 버전부터는 ‘썸네일 이미지(Thumbnail Image)’라는 용어를 추천 이미지(Featured Image)라는 용어로 바꾸고 기능을 더 개선했습니다.

테마에 썸네일(Featured Image) 사용하기

썸네일이 없던 2.9 이전 버전의 테마에서는, 포스팅에 부가적인 정보를 입력할 수 있는 Custom Fields에 이미지의 URL을 입력하고 필요할 때마다 그 포스팅의 Custom Fileds에 입력된 이미지를 불러와서 썸네일로 사용했습니다.

여기서는 추천 이미지(Featured Image)를 지원하지 않는 테마에 3.0 버전의 추천 이미지 기능을 추가하고 테마에 적용하는 방법을 알아보겠습니다.

추천이미지 사용법

페이지나 포스트의 편집 페이지 오른쪽 하단에 보면 왼쪽 그림과 같은 추천 이미지(Featured Image)라는 메뉴가 있습니다. Set featured image 링크를 클릭하면 From Computer, Gallery 또는 Media Library 라는 텝이 나오는데 그 중에 하나를 선택하면 아래 그림과 같이 화면 밑 하단에 ‘Use as featured image’라는 링크가 있습니다. 클릭하면 그 이미지가 해당 포스트나 페이지의 추천 이미지로 설정이 됩니다.(From URL 메뉴에서는 추천 이미지를 사용할 수 없습니다.) 썸네일을 저장하기 위해서 포스트 자체를 업데이트 할 필요는 없습니다. Use as featured image 링크를 클릭하면 자동으로 저장이 됩니다.

추천 이미지 기능 추가하기

해당 테마가 Featured Image 기능을 지원하지 않는다면 functions.php에서 추가를 해 줄 수 있습니다. 우선 해당 테마의 functions.php를 컴퓨터로 다운로드합니다. functions.php는 에러가 나면 아예 로그인 조차도 안되는 경우가 많기 때문에 수정전에 백업을 받아두는게 좋습니다. 문제가 발생하면 백업받은 파일을 다시 올리면 됩니다.

포스트나 페이지를 편집할 때 위와 같은 메뉴가 나오게 하려면, 테마 편집(Appearance)>편집기(Editor) 메뉴로 가서 functions.php 파일을 선택한 후에, functions.php 파일에 아래와 같은 코드를 추가해 줘야 합니다.

add_theme_support('post-thumbnails');

위 코드는 구 버전의 워드프레스에서는 지원하지 않기 때문에 설치된 워드프레스 버전에 따라 에러가 발생할 수 있습니다. 그래서 아래와 같이 코드를 구성해 주는게 안전합니다.

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
}

위 코드의 의미는 ‘add_theme_support’라는 function이 존재할 때에만 ‘add_theme_support’ function을 실행하라는 뜻입니다.

위와 같이 한 후에는 글 옆에 들어갈 이미지의 크기를 지정해 줘야 합니다. 두가지 방법이 있는데, 첫번째 방법은 아래와 같이 set_post_thumbnail_size 함수를 사용할 수 있습니다. set_post_thumbnail_size는 이미지 파일을 실제로는 생성하지 않고, img 태그의 속성에서 단지 폭과 높이를 지정해 줍니다. 그러면 브라우저가 그 크기에 맞게 리사이징을 하게 되는데, 만약 축소할 이미지가 크면 페이지의 로딩속도가 느려지고, 축소된 이미지 화질이 안 좋아지는 문제가 있습니다.

set_post_thumbnail_size( 100, 100, true );

그래서 아래와 같이 실제로 해당 크기의 이미지를 생성하는 add_image_size 함수를 사용을 합니다. add_image_size 기능이 functions.php에 추가되면, 워드프레스로 파일들을 업로드할 때, 원본 이미지 외에도, 썸네일 크기에 맞는 이미지 파일이 추가로 생성됩니다.

add_image_size('homepage', 120, 120, true);

위 코드에서 ‘Homepage’는 해당 썸네일의 이름으로 클래스명으로도 사용이 됩니다. 앞의 숫자 120은 가로 픽셀 크기, 뒤의 숫자는 세로 픽셀의 크기입니다. true는 원본 이미지를 축소해서 120×120의 크기로 맞춰서 썸네일 파일을 생성하라는 뜻이며, false는 원본 이미지의 비율은 그대로 유지하면서 축소하라는 뜻입니다. true의 경우에는 원본 파일이 설정한 크기와 비율이 안 맞으면 이미지 일부를 잘라내 버립니다. (참고 : 이미지 크기에 대한 이해)

여기서는 아래 보기와 같이, add_image_size를 사용해서 홈페이지의 메인페이지에 120ㅌ120 크기의 섬네일을 추가를 해 보도록 하겠습니다.

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
	add_image_size('homepage', 120, 120, true);
}

위 코드를 functions.php의 시작태그 <?php와 종료태그 ?> 안쪽에 붙여넣기를 해야 하는데, 잘 모르겠으면 페이지 제일 밑에 줄에 있는 종료태그 ?> 바로 앞에서 엔터를 쳐서 빈 줄을 만들고 거기에 붙여 넣기 하면 됩니다.

테마의 메인페이지에 썸네일 출력하기

추천 이미지 메뉴도 추가했고, 썸네일 이미지 화일을 만드는 기능도 추가 했기 때문에, 만들어진 썸네일을 테마에 출력만 하면 작업이 완성이 됩니다. 보통 메인페이지에 사용이 되는 템플릿 파일은 home.php 파일이나 index.php 파일이 사용됩니다. home.php 파일이 있으면 그 파일에 썸네일을 추가해야 되고, 없을 경우에는 index.php 파일에 썸네일을 추가하면 됩니다.

썸네일을 출력하는 코드는 아래와 같습니다. the_post_thumbnail의 괄호 안에는 add_image_size에서 사용했던 이름을 입력해야 합니다.

<?php the_post_thumbnail('homepage'); ?>

위 코드는 while과 endwhile 사이의 Loop문 안에서만 사용이 되는데, 어차피 위 코드를 붙여야 되는 the_content(); 나 the_excerp(); 코드도 루프문 안에서 사용이 되기 때문에, Loop문의 위치는 신경쓰지 않아도 됩니다.

앞에서 말한 것처럼 home.php나 index.php 파일을 열고 the_content(); 나 the_excerpt(); 부분을 찾아서 바로 그 위줄에 아래 보기와 같이 붙여주면 됩니다.

<?php
if ( has_post_thumbnail() && is_home()) {
  the_post_thumbnail('homepage');
}
?>
<?php the_content(.........); ?>

위 코드에서 if 문의 괄호안에 있는 코드의 뜻은, 해당 포스트에 추천 이미지가 설정되어 있고, 현재 페이지가 메인 페이지 일때만 the_post_thumbnail('homepage'); function을 실행하라는 뜻입니다.

썸네일 사용전의 이미지 파일의 생성

add_image_size는 전에 업로드했던 파일들에 대해서는 썸네일 이미지를 생성하지 않습니다. 전에 올린 파일들의 썸네일 이미지 파일을 만들기 위해서는 Regenerate thumbnails 플러그인을 사용하면 쉽게 만들 수 있습니다.

썸네일 스타일링

썸네일이 출력된 메인페이지에서 마우스 오른쪽 버튼을 눌러서 ‘소스보기’를 클릭하면 썸네일 부분이 아래와 같이 되어 있는 것을 확인할 수 있습니다.

<img width="120" height="120" src="이미지주소" class="attachment-homepage wp-post-image" alt="" title="" />

위에서 보면, img 태그의 클래스명으로 wp-post-image가 사용이 되었고, 또한 add_image_size 에서 사용했던 homepage 앞에 attachment가 붙어서 attachment-homepage로도 클래스명이 생성이 되는 것을 알 수 있습니다.

썸네일이 옆의 글과 조화를 이루기 위해서 style.css에 아래 보기처럼 적당히 css를 추가해주면 됩니다.

img.attachment-homepage {
	float:left;
	margin: 0 5px 5px 0;
	border: 1px solid #999;
}

미디어 설정(Media Settings) 메뉴와 이미지 크기(Image Size)에 대한 이해

설정을 하기 전에 우선 알아 두어야 할 것이 있는데, 외부 이미지 주소를 사용한다거나 Media 메뉴에 있는 ‘Add New’에서 파일을 올리지 않고 FTP로 계정에 파일을 업로드 하면 그 이미지들은 미디어 메뉴에서 관리를 할 수 없게 되어 있습니다. 관리가 가능한 파일은 아래와 같습니다.

• 페이지나 포스트 작성시에 ‘Add an Image’ 버튼을 사용해서 파일을 업로드한 경우
• Media>Add New 메뉴에서 파일을 업로드한 경우

이미지 크기(Image Sizes)에 대한 이해

위의 메뉴에 보면 작은 사진(썸네일, Thumbnail size), 중간크기(Medium size), 최대크기(large size)으로 세 개의 크기로 이미지를 설정할 수 있습니다. 하나의 파일을 올리게 되면 워드프레스는 자동적으로 위의 세가지 크기를 가진 이미지 파일을 생성합니다.

만약, 작은 사진의 크기가 100X100, 중간크기가 300X300, 최대크기의 이미지 사이즈가 600X600으로 설정이 되어 있고, 업로드한 파일의 크기가 700X700이고 파일명이 myimage.jpg 라면 계정에 아래와 같이, 업로드한 원본 파일 외에도, 세 개의 파일들이 더 만들어 집니다.

myimage-100x100.jpg, myimage-300x300.jpg, myimage-600x600.jpg

만약 원본 파일(Original file)의 사이즈가 500X500 이라면 myimage-600×600.jpg 파일은 생성되지 않습니다. 왜냐하면, 워드프레스는 설정한 사이즈 중에 원본보다 작은 사이즈만 파일로 생성을 합니다.

참고 : 기본적으로 파일을 업로드하면 위와 같이 되지만, 썸네일을 많이 사용하는 테마의 경우엔, 다른 크기의 이미지가 몇 개 더 만들어질 수도 있습니다.

위와 같이 원본 파일의 가로 폭과 세로 높이의 비율과, 설정해 놓은 가로 폭과 세로 높이의 비율이 같으면 이미지가 어떤 크기로 포스트에 사용이 되는지 알기 쉬운데, 서로 다를 경우에는 약간 복잡합니다.

기본적으로 워드프레스가 이미지를 축소할 때에는 원본 비율과 똑같이 비율로 축소를 합니다. 아래 그림처럼, 박스 이미지로 생각하면 이해가 쉽습니다. 만약 원본 이미지의 크기가 600X300 이고, 메뉴에서 설정해 놓은 중간크기가 300X300 이라고 한다면, 300X300 크기의 박스에 원본이미지를 일정 비율로 축소해서 넣는다고 상상해 보면 됩니다.

원본 비율을 유지하면서 박스안에 이미지가 다 들어가려면, 원본 이미지의 가로 폭이 300px가 되어야 합니다. 그러면 자동적으로 세로 높이는 150px가 됩니다. 생성된 중간크기의 이미지 파일은 myimage-300×150.jpg가 되고 포스팅에 첨부될 때는 폭이 300px, 높이가 150px인 사진이 출력됩니다. 즉, 설정에서 300×300으로 했다고 해서 포스팅할 때에 그 비율로 이미지가 나오지 않습니다.

하지만, 작은 사진(썸네일, Thumbnail size)의 경우에는 ‘썸네일을 정확한 크기로 잘라냅니다. 일반적으로 썸네일은 원본에 비례해서 만들어집니다. (Crop thumbnail to exact dimensions. normally thumbnails are proportional)’라고 되어 있는 체크박스 항목을 선택하면 조금 다른 방식으로 이미지가 만들어집니다.

쎔네일을 크롭으로 선택했을 경우에는, 원본이미지를 박스 안에 넣기 위해서 축소를 하다가, 폭과 높이중에 한쪽만 박스안에 완전히 들어가면 축소를 중지하고 들어가지 못한 부분의 이미지 양쪽 끝 부분을 잘라내버립니다. 위의 그림을 보면 세로부분은 잘림 없이 150px로 축소되었지만 가로의 경우엔 양 쪽 끝이 잘려나간 것을 알 수 있습니다.

임베드(Embeds)

임베드(Embeds) 항목은 동영상을 첨부할 때 필요한 설정입니다. ‘자동임베드(auto embeds)’ 항목을 선택하면, 포스트를 작성할 때 ‘비디오 추가(Add Video)>From URL’ 메뉴에서, 비디오(Video) URL 항목에 유트브와 같은 동영상 주소를 입력하면 해당 주소가 자동으로 임베드 되어서 포스트에 동영상이 삽입이 됩니다. 해제를 하게 되면 동영상은 나오지 않고 대신에, 타이틀 항목에 입력한 내용이 클릭 가능한 링크가 됩니다. 링크를 클릭하면 해당 동영상 주소로 이동을 하게 됩니다.

파일 업로드(Uploading Files)

이미지가 업로드될 디렉토리와 생성되는 디렉토리 이름을 설정할 수 있습니다.

‘이 폴더에 업로드한 파일을 저장(Store uploads in this folder)’와 ‘파일을 위한 전체 URL경로(Full URL path to files)’라는 두 가지 항목이 있는데, 전자의 경우는 이미지가 저장될 디렉토리의 경로를 상대경로로 지정하는 곳이고, 후자는 절대경로로 지정하는 곳 입니다. 두 곳 모두에 입력할 필요는 없고 한 곳에만 경로가 제대로 입력이 되어 있으면 됩니다.

보통 워드프레스를 설치하면 ‘Store uploads in this folder’에 아래와 같이 경로가 자동으로 입력이 되어 있는데, 아래 보기처럼 경로 맨 앞쪽에 ‘/’가 없어야 합니다.

wp-content/uploads

전체 URL경로(Full URL path to files) 항목에 경로를 입력할 경우에는 아래 보기와 같이, 앞에 슬래시(/)가 있어야 합니다.

/home/경로/wp-content/uploads

내가 올린 파일들을 년/월별로 분류하기(Organize my uploads into month- and year-based folders) 항목을 선택하면, 디렉토리명이 파일을 업로드한 날짜 형식으로 만들어져서 업로드할 파일이 많을 경우 체크해 두면 파일을 관리하기가 편합니다.

만약 파일 업로드가 잘 안된다면 파일 권한 문제를 의심해 봐야 합니다.

새로운 크기의 썸네일을 생성하는 플러그인 – Regenerate Thumbnails

Regenerate Thumbnails 플러그인 다운로드

Regenerate Thumbnails 사용법

Regenerate Thumbnails 플러그인은 이미 생성된 파일들은 삭제하지 않습니다. 미디어 설정에서 바뀐 새로운 이미지 크기의 파일만 추가로 생성합니다.

활성화하면 관리자 페이지 왼쪽 사이드바에 ‘Regen. Thumbnails’ 메뉴가 생깁니다. 그 메뉴를 클릭해서 ‘Regenerate All Thumbnails’ 버튼을 클릭하면, 미디어 설정에서 변경한 이미지 크기로 썸네일 파일이 새로 생성이 됩니다.

라이브러리’Library’ 메뉴에서 특정 파일에 마우스를 올리면 ‘Regenerate Thumbnails’라는 링크가 뜨는데 그 링크를 클릭하면 해당 파일만 새로운 크기의 이미지 파일이 만들어 집니다. 파일 목록 앞에 체크박스를 선택한 후에 목록 위쪽에 있는 Select box에서 ‘Regenerate Thumbnails’를 선택해서 여러개의 파일도 한꺼번에 새로운 크기의 이미지 파일을 만들 수 있습니다.

워드프레스에서의 permission

파일이나 디렉토리의 퍼미션은 아래과 같이 세자리의 숫자로 표시할 수 있습니다.

777, 755, 750, 644, 660, ...

첫번째 자리의 숫자는 user 또는 owner를 뜻하며, 두번째 자리의 숫자는 group, 세번째 자리는 world를 뜻한다고 합니다.

각 자리의 숫자는 읽기(Read 4), 쓰기/수정/생성(Write 2) 실행(eXecute 1)의 값을 더해서 표기를 합니다. 만약 어떤 디렉토리나 파일의 퍼미션이 755라면 아래와 같은 의미를 가집니다.

7(4 + 2 + 1) : 소유자 혹은 유저는 해당 디렉토리나 파일에 대해 쓰기,읽기,실행을 할 수 있는 권한을 가짐
5(4 +1) : group은 읽기와 실행의 권한을 가짐
5(4 +1) : world는 읽기와 실행의 권한을 가짐

즉 위의 뜻은 디렉토리의 소유자 외에는 디렉토리의 읽기와 실행만 할 수 있고, 디렉토리의 쓰기나 수정 또는 생성은 할 수 없다는 뜻이 됩니다.

워드프레스에서 기본적으로 사용되는 permission은, 디렉토리에는 755 또는 750, 파일에는 644로 되어 있습니다.

참고 사이트 : http://codex.wordpress.org/Changing_File_Permissions

하지만 워드프레스의 디렉토리 퍼미션이 755, 파일이 644로 되어 있어도, 호스팅 업체의 설정에 의해서, 워드프레스상에서 디렉토리나 파일을 생성하고 수정하는데 제한이 발생할 수 있습니다. 이와 같은 경우에는 ftp로 계정에 직접 접속해서 작업을 해야 합니다.

Editor에서 수정한 내용이 저장이 안되는 경우

워드프레스 관리자 메뉴에서 ‘Appearance(외모)>Editor’에서 Style.css 나 index.php 같은 파일을 수정해도 에디터 창 아래 쪽에, 수정된 내용을 저장하는 ‘Update File’ 버튼이 나타나야 하는데, 그 버튼은 나타나지 않고 아래와 같은 안내 문구만 나타납니다.

You need to make this file writable before you can save your changes. See the Codex for more information.

위와 같은 경우 FTP로 계정에 접속해서 해당 파일을 다운받아서 수정한 후에 다시 업로드할 수도 있고, 해당 파일의 퍼미션을 666이나 777로 변경을 하면, ‘Appearance>Editor’ 페이지에서 에디터창 밑에 ‘Update File’ 버튼이 제대로 나타나는 경우가 많습니다.

이미지 업로드가 안 되는 현상

포스트를 작성하면서 이미지를 첨부하거나, 관리자 메뉴의 ‘Media>Add New’에서 파일을 업로드 할 때에 아래와 같은 안내문구가 나오면서 파일을 업로드 할 수 없는 문제가 발생할 수 있습니다.

WordPress Error: Unable to create directory /wp-content/uploads/2009/mydir/summer/ Is its parent directory writable by the server?

위와 같은 경우에 우선 의심해 볼 수 있는 것이 파일의 경로입니다.

‘Settings>Media’ 페이지 하단에, 포스트에서 이미지를 첨부하거나 ‘Media>Add New’에서 파일을 올리면 저장될 디렉토리를 설정하는 곳이 있습니다.

‘Store uploads in this folder’와 ‘Full URL path to files’라는 두 가지 항목이 있는데, 전자의 경우는 이미지가 저장될 디렉토리의 경로를 상대경로로 지정하는 곳이고, 후자는 절대경로로 지정하는 곳 입니다. 두 곳 모두에 입력할 필요는 없고 한 곳에만 경로가 제대로 입력이 되어 있으면 됩니다.

보통 워드프레스를 설치하면 ‘Store uploads in this folder’에 아래와 같이 경로가 자동으로 입력이 되어 있는데, 아래 보기처럼 경로 맨 앞쪽에 ‘/’가 없어야 합니다.

wp-content/uploads

반면에 ‘Full URL path to files’를 사용하고 있다면 절대경로이기 때문에 아래 보기처럼 맨 앞에 ‘/’가 있어야 합니다.

/home/경로/wp-content/uploads

위와 같이 경로가 올바르게 되어 있음에도 에러문구가 뜬다면, 호스팅 업체의 설정 때문에 워드프레스가 uploads 디렉토리를 생성하지 못할 가능성이 큽니다. 왼쪽 그림처럼 FTP로 접속해서 uploads 디렉토리가 있는지 확인하고 없으면 uploads 디렉토리를 직접 만든 후에 퍼미션을 755로 해보고, 그래도 업로드가 안된다면 777로 변경해야 합니다.

‘Organize my uploads into month- and year-based folders’ 옵션은 이미지를 올릴 때 uploads 디렉토리 밑에 날짜 이름으로 된 하위 디렉토리를 만들기 때문에, 위와 같은 퍼미션 문제가 있다면 계속 문제가 발생할 가능성이 있으므로, 체크박스를 해제해서 바로 uploads 디렉토리에 이미지 파일이 업로드 되도록 하는 것이 좋습니다. 만약 체크박스를 체크한 상태로 두고 싶다면 uploads 폴더의 퍼미션을 지정할 때 왼쪽 그림의 ‘하위 디렉터리로 이동’ 체크박스를 선택해서 uploads 디렉토리 밑의 모든 디렉토리가 755나 777 퍼미션을 갖도록 해 주는게 편리합니다.

디렉토리나 파일을 생성하는 플러그인이 제대로 작동이 안 되는 현상

워드프레스 상에서 디렉토리나 파일의 쓰기/생성/수정이 안되는 경우, 따로 파일이나 디렉토리를 생성하는 플러그인도 제대로 동작하지 않을 가능성이 높습니다. 그럴 경우엔 또 계정으로 직접 접속해서 플러그인이 생성하려고 하는 디렉토리나 파일을 직접 만들고 해당 디렉토리의 퍼미션을 755나 777로 설정 해야 합니다. 보통 ‘No such file or directory’이나 permission 와 같은 에러 문구가 뜬다면 permission 문제일 가능성이 높습니다.

777은 누구나 접근이 가능한 permission이기 때문에 보안에 취약할 수 있다고 합니다. 하지만 요즘은 호스팅 업체의 보안 기술이 좋아서 그렇게 위험하지는 않다고도 합니다. 약간 찜찜하다고 생각되면 번거롭긴 하지만, 작업을 끝낸 후에는 퍼미션을 원 상태로 바꿔주면 됩니다.

이미지 슬라이더 플러그인 – Promtion Slider

다른 이쁘고 기능 많은 갤러리 플러그인이나 슬라이더 플러그인이 많은데도 불구하고 Promotion Slider를 소개하는 이유는 아래와 같습니다.

• 대부분의 슬라이더 플러그인은 Media Library 의 ‘Add New’에서 올린 이미지나, 포스팅 중에 자신의 컴퓨터에서 업로드한 이미지만 슬라이더에 사용이 가능하지만, Promotion Slider는 외부 사이트의 이미지도 슬라이더에 사용이 가능합니다.
• 슬라이더의 이미지를 클릭했을 때 자신의 사이트 내부에 있는 페이지 뿐 아니라 외부 사이트의 페이지로도 이동이 가능합니다.
• Custom Post Type을 이용해서 슬라이더에 필요한 이미지만 따로 관리가 가능하고, 자동으로 이미지가 슬라이더에 첨부가 안되는 단점이 있지만, 반면에 슬라이더에 사용할 이미지를 원하는대로 설정이 가능합니다.
• 슬라이더에 구글 애드센스와 같은 광고를 삽입할 수 있습니다.
• 다양한 hook을 제공하고 있기 때문에 여러가지 다양한 설정이 가능합니다.

Promotion Slider 다운로드

사용법은 아래 동영상을 보면 알 수 있습니다. 어차피 영어는 알아 듣기 힘드니까, 소리에 집중하지 말고 화면만 잘 보시면 됩니다.

Promotion Slider를 설치하고 활성화하면 왼쪽 사이드바에 ‘Promotions’라는 메뉴가 생기고 서브 메뉴로 ‘Promotions’ 와 ‘cateogories’가 생깁니다. 여기서 Promotion 이란 하나의 이미지를 뜻하고, Category는 하나의 슬라이더를 뜻합니다. 즉 여러 개의 이미지(promotion)을 만든 후에, 그 이미지들을 원하는 슬라이더(category)로 지정해 주면 됩니다.

우선 ‘categories’에서 이미지가 담길 슬라이더를 만듭니다. 그 후에 promotion에서 이미지를 만들고 해당 이미지가 사용될 category(즉, 슬라이더)를 지정해 주면 됩니다.

외부 사이트 이미지 링크를 사용하는 방법

promotion을 만들 때, 오른쪽 하단에 있는 ‘Set featured image’를 선택합니다. 그 후에 from computer 탭을 눌러서 자신의 컴퓨터에서 이미지를 업로드 하거나, gallery 또는 Media Library 중에서 하나를 선택한 후에 이미지 옆에 있는 ‘show’ 버튼을 선택해서 이미지를 불러온 후에 ‘Use as featured image’를 선택하면 promotion의 이미지로 사용이 됩니다.

하지만, from url 탭을 선택하면 하단에 ‘Use as featured image’ 항목이 없어서 외부 사이트의 이미지 링크를 사용할 수 없게 되어 있습니다. Promotion 으로 외부 이미지를 사용하고 싶다면 하단에 있는 ‘CDN image URL’에 해당 이미지의 주소를 입력하면 됩니다. (예: http://externalsite.com/image.jpg)

그리고 이미지를 클릭했을 때, 외부 사이트로 이동하게 하고 싶다면, ‘Destination URL’ 항목에 외부 사이트 주소를 입력하면 됩니다. (예: http://externalsite.com/)

슬라이더를 페이지에 넣기

Promotion slider는 shortcode와 php 코드를 제공합니다. 페이지나 포스트 또는 사이드바에 있는 텍스트 위젯에는 shortcode를 사용하면 되고, 직접 php 파일내부에 슬라이더를 넣고 싶다면 php 코드를 사용해야 합니다.

슬라이더는 어떤 페이지나 포스트에도 사용이 가능합니다. 페이지나 포스트의 에디터 창에서 ‘HTML’ 탭을 선택한 후에 shortcode를 입력하면 됩니다. (예: [promoslider category="category-name"] ) 다운로드 페이지에 있는 ‘FAQ’ 탭을 선택하면 자세하게 설명이 잘 되어 있습니다.

만약, 홈페이지의 메인페이지 상단에 슬라이더를 삽입하고 싶다면, frontpage를 하나 만들고 그 페이지 제일 상단에 shortcode를 넣으면 됩니다.

그런데, 아예 메인페이지의 제목 위쪽에 이미지 슬라이더를 넣고 싶다면 에디터 창 밖의 영역이므로, 아래와 같은 php 코드를 해당 템플릿 파일의 적당한 곳(제목 위쪽)에 직접 넣어야 합니다. 보통은 home.php 파일에 아래 코드를 넣어야 하는데, home.php 파일이 없으면 index.php 파일에 넣으면 됩니다.

<?php echo do_shortcode('[promoslider category="category-name"]'); ?>

서버의 사양 확인 플러그인 WP-ServerInfo

WP-ServerInfo 다운로드

워드프레스를 사용하면 한 번 쯤은 찾아보게 되는 서버 정보에는 다음과 같은 것들이 있습니다.

• php 버전
• MySQL 버전
• GD library 지원 여부
• cURL 지원 여부
• PHP Memory Limit
• PHP Max Upload Size

플러그인 설치와 사용법

그냥 설치하고 활성화(activate)하면 메뉴에서 확인이 가능합니다.

활성화된 불필요한 플러그인이 많을 수록 워드프레스 동작에도 안 좋은 영향을 끼치기 때문에, wp-serverinfo 플러그인처럼 평소에는 필요하지 않는 플러그인은 그냥 설치만 해 놓고 필요할 때만 활성화 하는게 좋습니다.

플러그인이나 테마로 인한 로그인 문제 해결하기

원리는 간단합니다. 워드프레스는 테마나 플러그인을 해당 디렉토리의 이름으로 인식을 합니다. 만약 설치되어 있는 플러그인이나 테마의 디렉토리 이름을 바꾸면 워드프레스가 실행되면서 해당 플러그인이나 테마를 찾지 못하기 때문에 비활성화 되어 버립니다.

플러그인의 경우에는 FTP로 계정에 접속해서 의심이 가는 플러그인의 디렉토리 이름을 바꿔줍니다. 그 후에 워드프레스로 로그인이 되는지 확인해 보면 됩니다.

특정 플러그인이 아니라 전체 플러그인을 비활성화 시키고 싶다면, 우선 계정으로 접속해서 plugins 디렉토리를 plugins_old 와 같이 바꿉니다. 그 후에 plugins 라는 디렉토리를 하나 더 만듭니다. 이렇게 하면 plugins 디렉토리에는 설치된 플러그인이 하나도 없기 때문에 전체 플러그인이 비활성화 됩니다.

워드프레스로 로그인이 되는 것을 확인한 후에, plugins-old 디렉토리에 있는 플러그인 디렉토리들을, plugins 디렉토리로 하나씩 옮겨가면 됩니다.

테마의 경우에는 themes 밑에 있는 디렉토리 이름을 바꾸게 되면 사이트 전체는 빈 공백으로 나오지만, 로그인은 가능합니다. 로그인 한 후에 다른 테마를 선택하면 됩니다.

워드프레스 유료 테마 사이트들

저도 실제로 구매는 해 본 적이 없어서 해당 사이트의 설명만 읽어 봤는데, 대부분 신용카드와 페이팔로 결제가 가능하게 되어 있습니다. 간단한 주의사항으로는,

• 워드프레스 3.0 버전과의 호환성 여부 – 오래된 테마도 3.0 버전에서 설치는 되지만 사용이 불편하고 더 많은 기능을 사용하는데 어려움이 있을 수 있습니다.
• 한글을 적용했을 때에도 테마가 보기 좋을 것인가 고려.( 참고 : 워드프레스 테마에서 한글이 출력이 안될 때 )
• 워드프레스용 테마인지 확인할 것 – 보통 워드프레스의 테마는 theme으로 불리고 그 외의 스킨은 템플릿이라고 불립니다.(예: html template, joomla template, site template…) 여기에 나오는 사이트는 대부분 워드프레스 전용입니다.
• child theme은 framework라고 불리는 parent theme이 있어야 작동을 합니다. child theme이라고 되어 있으면 해당 테마의 parent theme도 같이 주는지 확인해야 합니다.
• subscription으로 테마를 판매하기도 하는데, 보통 sucscription을 하면 해당 테마에 대한 재 다운로드, 업데이트 등의 지원을 하면서 월 주기나 년 주기로 비용이 발생합니다. 테마가 이상이 없으면 가장 짧은 기간을 선택하면 됩니다.

아래 배너를 클릭한 후에, 각 사이트의 상단에 있는 theme 메뉴를 선택하면 사이트의 전체 워드프레스 테마를 볼 수 있습니다. Themeforest의 경우 상단의 메뉴중에서 wordpress 메뉴에 있는 테마만 선택해야 합니다.

themeforest.net

elegantthemes.com

woothemes.com

themefuse.com

organicthemes.com

blogohblog.com

themeshift.com

studiopress.com

templatic.com

obox-design.com

richwp.com

solostream.com

themetrust.com

vivathemes.com

acosmin.com

alohathemes.com

appthemes.com

beatheme.com

chimerathemes.com

bleepli.com

colorlabsproject.com

edothemes.com

flexithemes.com

gabfirethemes.com

gorillathemes.com

tokokoo.com

idesigneco.com

magazine3.com

mojo-themes.com

press75.com

nattywp.com

pliablepress.com

proudthemes.com

themify.me

wparcade.com

wobzy.com

wpyuzu.com

wpzoom.com

wpnow.com

premiumpress.com

neatothemes.com

sharkthemes.com

photocrati.com

pagelines.com

zidalgo.com

simplethemes.com

themejam.com

theme-junkie.com

thewpninja.com

upthemes.com

wordprezzie.com

youjoomla.com

13styles.com

stylewp.com

cssigniter.com

dailywp.com

kreativethemes.com

superstarthemes.com

bigthemes.com

그 외 유료 테마 사이트

• buddydress.com
• diythemes.com
• rockettheme.com
• bavotasan.com

검색엔진에 최적화된 테마

나름대로 선택 기준은 다음과 같습니다.

• 헤딩 태그 h1을 사이트 타이틀이 아니라 포스트 제목에 사용할 것, 단, 메인페이지에는 사이트 타이틀에 h1 태그가 사용되어 있을 것.
• 사이드 바의 각 항목의 제목은 h2가 아니라, h3 또는 h4 헤딩 태그를 사용할 것.
• 헤딩 태그 h1 태그의 폰트 크기가 제일 크고 h6 까지 순서대로 작아져야 함.
• 웹 표준을 준수할 것.

Prototype

특징

• html5 테마
• framework용으로 사용가능
• 포스트마다 다른 레이아웃을 사용할 수 있음 – 사이드바의 컬럼을 하나 또는 두 개로 선택 가능, 왼쪽이나 오른쪽으로 선택 가능, 완전히 사이드바를 없앨 수도 있음
• 워드프레스 3.0 메뉴 시스템 지원
• 타 테마들에 비해서 업데이트가 잦기 때문에 테마를 자주 수정한다면 child theme으로 사용할 것을 추천

다운로드 : Prototype

Suffusion

특징

• 19개의 위젯 제공
• 17개의 테마 색상 제공
• 그 외 다양한 옵션 제공
• 워드프레스 3.0 메뉴 시스템 지원
• 새로운 버전으로 자주 업데이트 제공

다운로드 : Suffusion

HeatMap Adsense Theme

특징

• WordPress 3.0 Menu System을 지원하지 않는 단점이 있음
• 헤더 상단이나 하단 또는 포스트 제목 위 아래 등등 다양한 위치(12개의 위젯 제공)에 애드센스 광고나 필요한 코드를 삽입할 수 있음.
• 사용자를 위한 다양한 옵션이 있음.
• 더 이상 업데이트 지원은 없고 더 높은 버전은 유료.

다운로드 : HeatMap Adsense Theme

Hybrid

특징

• 워드프레스에서 꽤 유명한 Justin Tadlock이라는 분이 만든 테마, Prototype과 Retro-fitted 테마도 만들었는데, 그 이전에 만든 테마
• framework용으로 널리 사용되며 다양한 Child Theme들이 있음.
• style.css에서 import를 사용해서 다른 레이아웃으로 변경 가능

다운로드 : Hybrid
child theme 살펴보기 : Hybrid child themes

Retro-fitted

특징

• html5 테마
• parent theme
• 포스트마다 다른 레이아웃을 사용할 수 있음 – 사이드바의 컬럼을 하나 또는 두 개로 선택 가능, 왼쪽이나 오른쪽으로 선택 가능, 완전히 사이드바를 없앨 수도 있음
• 워드프레스 3.0 메뉴 시스템 지원

다운로드 : Retro-fitted

Swift

특징

• 그리드 레이아웃
• 빠른 로딩속도
• 다양한 옵션 제공
• 워드프레스 3.0 메뉴 시스템 지원

다운로드 : Swift

Thematic

특징

• framework의 고전
• 다양한 위치에 위젯 제공
• style.css에서 import를 사용해서 다른 레이아웃으로 변경 가능
• WordPress 3.0 메뉴 지원

다운로드 : Thematic
유,무료 child theme 살펴보기 : Thematic child themes

Dojo

특징

• 고전적인 레이아웃 형태의 테마
• 워드프레스 3.0메뉴 미지원

다운로드 : Dojo

wordpress.com과 wordpress.org의 차이점과 장단점 비교

참고 사이트 : WordPress.com vs. WordPress.org

wordpress.org

• 워드프레스라는 소프트웨어와 테마 플러그인 등을 제공하지만 호스팅은 제공하지 않습니다.
• 워드프레스를 운영하기 위해서는 다운받은 워드프레스를 설치할 공간이 필요하기 때문에 호스팅이 필요합니다.
• 스스로 설치하고 운영하고 용량 관리, 업데이트, 백업 등의 문제들을 스스로 관리해야 합니다.
• 아주 자유도가 높아서 운영자의 능력만 있으면 다양한 디자인과 기능을 구현할 수 있습니다.
• 운영자 소유이므로 제품을 판매하거나, 애드센스 광고나 제휴등을 통해 수익을 올릴 수 있습니다.
• 아주 방대한 커뮤니티와 검색을 통해서 다양한 정보를 얻을 수 있고 필요한 문제등을 해결 할 수 있습니다.

wordpress.com

• 워드프레스 설치가 필요 없기 때문에 호스팅 필요없이 가입만 하고 설정만 하면 바로 사용이 가능합니다.
• 용량 제한(3기가)이 있어서 그 이상 사용시 추가비용이 발생합니다.
• 개인이 아닌 업체에서 운영하기 때문에, 비교적 안정적이며, 백업등이 지원이 됩니다.
• 개인만 사용하는 것이 아니기 때문에 제한이 많습니다.
• 플러그인은 설치할 수 없고 테마도 약 100여개 남짓한 것 중에서 선택해서 사용이 가능합니다.
• 테마의 수정, 도메인 연결, 용량 추가등 많은 옵션에서 비용이 발생합니다.
• 타 블로거들과 교류가 용이합니다.

wordpress.com은 기본적인 사용은 무료이기 때문에 더 궁금한 점이 있으면 직접 가입해서 알아 볼 수 있습니다. 설치형도 무료로 호스팅을 제공하는 곳이 많기 때문에 무료 호스팅업체에 계정을 만들어서 테스트해 볼 수 있습니다.

그래서 인터넷 익스플로러의 주소바에서 워드프레스의 고유주소를 한글로 나타낼 방법이 없는지 찾아봤는데 만족할만한 해결책이 보이지 않았습니다. wordpress.org 사이트의 Ideas에도 건의사항으로 예전부터 올라와 있긴 한데 아직은 해결될 기미가 보이지 않고 있습니다. 여기서는 완벽하진 않지만 최소한 사이트내의 링크들은 주소창에 한글로 표시할 수 있는 방법을 알려드릴까 합니다.

IE 브라우저의 주소창에 한글 고유주소가 깨짐없이 나타나게 하기

앞에서도 말씀드렸듯이, 워드프레스는 퍼센트 인코딩으로 되어 있습니다. 워드프레스의 테마에서 고유 주소를 출력하는 php 코드는 보통 the_permalink() 와 get_permalink 두 가지 방법이 사용이 됩니다. 퍼센트 인코딩 되어 있는 두 개의 코드를 디코딩해 주면 테마내에 있는 링크들의 고유주소가 한글로 출력됩니다. 그 링크들을 클릭하면 익스플로러의 주소창에 디코딩된 그대로 한글로 출력이 됩니다.

get_permalink를 디코딩하기

우선 ‘Appearance>Editor’ 페이지의 오른쪽에 있는 템플릿 파일들 중에서 get_permalink() 코드가 사용된 부분을 찾아서 urldecode(get_permalink())로 바꿔 주면 됩니다.

테마마다 템플릿 파일들이 다 다르고 그 파일안의 코드도 다 다르기 때문에 바로 찾기는 힘이 들고, 우선 템플릿 파일 하나를 선택한 후에, 브라우저 상단의 메뉴에서 ‘편집>찾기’를 선택하고 get_permalink를 입력해서 찾아보면 간단하게 찾을 수 있습니다.

Twenty Ten의 경우에도 get_permalink()가 쓰인 곳이 몇 군데 있습니다. 예를 들면 functions.php의 아래와 같은 부분에도 get_permalink()가 있습니다.

function twentyten_continue_reading_link() {
	return ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) . '</a>';
}

위의 코드를 아래과 같이 수정하면 발췌문 밑에 ‘Continue Reading’이라고 된 해당 포스트의 링크가 한글로 출력이 됩니다.

function twentyten_continue_reading_link() {
	return ' <a href="'. urldecode(get_permalink()) . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) . '</a>';
}

위 부분 외에도 functions.php에 get_permalink()가 사용된 곳이 몇 군데 더 있고, 다른 몇 개의 템플릿 파일에도 사용된 곳이 있습니다. 같은 방식으로 수정하면 될 듯 합니다.

the_permalink를 한글 고유주소로 바꾸기

the_permalink도 퍼머링크 주소를 출력하는데, get_permalink와는 달리 urldecode()를 사용해도 한글로 출력이 되질 않습니다. 왜 그런지 저도 정확한 이유는 잘 모르고, 아래와 같이 the_permalink 앞 쪽과 뒤쪽에 아래와 같은 코드를 추가해 줘야 한글로 출력이 된다라고만 알고 있습니다.

ob_start(); the_permalink(); $permalink = ob_get_clean(); print(urldecode($permalink));

ob_start()는 해당 코드 뒤에 실행되는 값을 저장하는 역할을 합니다. 따라서 뒤에서 실행되는 the_permalink의 값은 테마에 출력되지 않고 저장만 하고 있는 상태가 됩니다.
$permalink = ob_get_clean()는 저장된 값을 &permalink 변수에 저장을 하는 역할을 합니다. 이 값을 urldecode를 사용해서 한글로 바꿀 수 있습니다.

the_permalink는 Twenty Ten 테마의 loop.php 파일에서도 몇 군데 사용이 되고 있습니다. 갤러리 타이틀과 포스트 타이틀의 주소를 출력할 때 사용이 되고 있습니다. 그 중에 하나를 예를 들면 아래와 같은 부분이 있습니다.

아래 코드는 홈페이지 또는 카테고리 페이지에서 글 목록이 출력될 때 각각의 포스트의 제목과 고유주소를 출력하는 역할을 합니다.

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

아래와 같이 the_permalink();의 앞쪽과 뒤쪽에 앞에서 말했던 코드를 추가해 주면 한글이 사용된 포스트 주소가 제대로 한글로 표시가 됩니다.

<h2 class="entry-title"><a href="<?php ob_start(); the_permalink(); $permalink = ob_get_clean(); print(urldecode($permalink)); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

물론, 테마내에 포스트 링크를 출력하는 플러그인들도 위와 같은 방법을 사용해서 한글 고유주소가 제대로 출력되게 할 수 있습니다. 하지만 테마나 플러그인을 업데이트 하게 되면 다시 수정을 해 줘야 하는 번거로움이 있긴 합니다.

그냥 해당 영역에 해당하는 곳에 바로 html 태그나 필요한 내용을 넣을 수도 있지만, 위젯을 사용하면 관리자 창에서 새로운 내용을 추가하거나 삭제하기가 편하고, 여기에 Widget Logic과 같은 플러그인을 사용하면 특정 페이지나 포스트에서만 위젯을 숨기거나 보이게 할 수 있기 때문에 매우 유용합니다. 그래서, 여기서는 웹페이지에서 사이드바 외의 영역에 위젯 영역을 만드는 방법을 알아보려고 합니다.

테마에 위젯 영역 만들기

우선, 해야할 작업은 아래와 같습니다.

• function.php 파일에서 위젯 영역 등록.
• 위젯 영역을 추가해야 할 템플릿 파일을 찾아서 위젯영역 추가하기
• ‘Appearance>Widget’에서 functions.php에서 등록한 위젯 영역에 원하는 위젯을 추가
• css 파일에서 해당 영역 스타일링.

functions.php에 위젯 영역 등록하기

자신의 테마가 ‘Appearance>Widgets’ 페이지에 이미 위젯 영역을 제공하고 있다면 functions.php 파일에 아래와 같이 register_sidebar나 register_sidebars와 같은 함수가 사용된 부분이 있을 겁니다.

if ( function_exists('register_sidebars') )
    register_sidebars(2);

위의 경우는 여러개의 위젯 영역을 일괄적으로 한꺼번에 등록할 때 주로 사용합니다. 각각의 위젯 영역을 조금씩 다르게 설정하고 싶을 경우에는 아래와 같은 방법을 사용합니다.

if ( function_exists('register_sidebar') ) {

	register_sidebar(array(
		'name'=>'Top Sidebar',
		'before_widget' => '<div id="%1$s" class="my-widget top-widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widgettitle">',
		'after_title'   => '</h3>'
	));

	register_sidebar(array(
		'name'=>'Middle Sidebar',
		'before_widget' => '<div id="%1$s" class="my-widget middle-widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widgettitle">',
		'after_title'   => '</h3>'
	));

}

전자의 경우에, 위젯을 추가하고 싶다면, register_sidebars(2);라고 된 부분의 숫자를 추가하고 싶은 위젯 영역의 수만큼 더해 주면 됩니다. 만약 위젯영역을 3개 더 만들고 싶다면 아래와 같이 됩니다.

if ( function_exists('register_sidebars') )
    register_sidebars(5);

위와 같이 수정을 하면 ‘Appearance>Widget’ 페이지의 오른쪽 사이드바의 위젯 메뉴에 Sidebar 3, Sidebar 4, Sidebar 5 의 위젯 영역이 자동적으로 추가가 된 것을 확인할 수 있습니다.

후자의 경우에는 register_sidebar라는 함수를 사용해서 추가해 줄 수 있습니다. 만약 기존 위젯 영역 외에 After Tilte 이라는 위젯영역을 하나 더 추가해 주고 싶다면 아래와 같이, 기존에 있던 코드의 일부분 register_sidebar 부터 )); 부분까지 복사한 후에 if문안에 붙여넣기해서 name 부분만 다르게 약간 수정을 해주면 됩니다.

if ( function_exists('register_sidebar') ) {

	register_sidebar(array(
		'name'=>'Primary Widget Area',
		'before_widget' => '<div id="%1$s" class="my-widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widgettitle">',
		'after_title'   => '</h3>'
	));

	register_sidebar(array(
		'name'=>'Secondary Widget Area',
		'before_widget' => '<div id="%1$s" class="my-widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widgettitle">',
		'after_title'   => '</h3>'
	));

// 추가된 After Title 위젯 영역

	register_sidebar(array(
		'name'=>'After Title',
		'before_widget' => '<div id="%1$s" class="my-widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widgettitle">',
		'after_title'   => '</h3>'
	));

}

전자의 방식으로 위젯 영역을 만들면 매우 간단하지만, 아래와 같이, 위젯 영역의 이름, 위젯 영역의 출력에 사용되는 div, ul, li, 헤딩 태그 등이 자동으로 출력되기 때문에 자신의 요구대로 맞출 수가 없습니다.

<ul>
	<li id="recent-comments-5" class="widget widget_recent_comments">
		<h2 class="widgettitle">최근 댓글</h2>
		<ul id="recentcomments">
			<li class="recentcomments"><a href='http://wordpress.org/' class='url'>Mr WordPress</a> on <a href="http://yoursite.com/hello-world.html#comment-1">Hello world!</a></li>
		</ul>
	</li>

	<li id="text-4" class="widget widget_text">
		<h2 class="widgettitle">텍스트 위젯 타이틀</h2>
		<div class="textwidget">텍스트 위젯 내용</div>
	</li>
</ul>

위에서 보면, 위젯 영역은 ul 태그로 둘러싸여 있고, 위젯 영역에 등록된 각각의 위젯은 각각 li 태그로 둘러싸여 있다는 것을 알 수 있습니다. 그리고 각각의 위젯 타이틀에는 헤딩태그 h2를 사용하고 있다는 것을 알 수 있습니다. 그리고 위젯의 내용이 출력되는 곳은, Recent Posts 나 Recent Comments 와 같이 어떤 목록이 출력되는 경우에는 ul 태그가 사용이 되고, Text 위젯같은 경우에는 div 태그가 사용이 되고 있는 것을 알 수 있습니다.

반면에 후자의 방식으로 위젯 영역을 만들 경우는 약간 복잡하긴 하지만 위젯 출력방식을 functions.php 파일에서 직접 지정해 줄 수가 있는 장점이 있습니다. 왼쪽의 스크린샷은 후자의 방식을 사용해서 ‘Appearance>Widgets’ 페이지에 After Title 이라는 위젯 영역을 만든 모습입니다.

후자의 방식을 사용해서 위젯 영역을 만든 경우, 전자의 방식과는 달리, 위젯 영역을 둘러싸고 있던 ul 태그가 없어지고, 위젯 영역에 등록된 각각의 위젯의 엘리먼트들은 functions.php에서 지정한 방식대로 출력이 됩니다.

<div id="recent-comments-3" class="my-widget widget_recent_comments">
	<h3 class="widgettitle">최근 댓글</h3>
		<ul id="recentcomments">
			<li class="recentcomments"><a href='http://wordpress.org/' class='url'>Mr WordPress</a> on <a href="http://yoursite.com/hello-world.html#comment-1">Hello world!</a></li>
		</ul>
</div>

<div id="text-4" class="my-widget top-widget widget_text">
	<h3 class="widgettitle">택스트 위젯 타이틀</h3>
		<div class="textwidget">텍스트 위젯 내용</div>
</div>

위젯 영역을 만들기 위해 functions.php에 사용한 코드들은 다음과 같습니다 .

• if (function_exist('register_sidebar')){ // 실행할 함수 } : 워드프레스는 버전에 따라 사용할 수 없는 함수가 있는데, 만약 지원하지 않는 함수를 사용하게 될 경우 에러가 발생합니다. 그럴 경우를 대비해서 function_exists를 통해서 사용 가능 여부를 확인 할 수 있습니다. 위 코드의 경우는 register_sidebar 함수가 지원이 될 경우에만 중괄호안의 코드들을 실행하는 역할을 합니다.
• register_sidebar() : ‘Appearance>Widgets’ 페이지에 해당 위젯 영역이 생성됩니다. 생성된 위젯 영역에 사용하고 싶은 위젯을 마우스로 끌어다 놓으면 됩니다.
• array() : array는사용될 파라미터가 많을 경우 사용하는 그 파라미터들을 둘러싸는 배열문입니다.
• name : 위젯 영역의 이름
• before_widget : 각각의 위젯 앞쪽에 위치하는 HTML 태그
• %1$s : 위젯 영역에 있는 각각의 위젯을 서로 다르게 스타일링하고 싶을 때가 있습니다. 그럴때 %1$s 파라미터를 해당 엘리먼트의 id 로 사용하면, 워드프레스가 자동적으로 위젯 영역에 있는 각각의 위젯들에게 고유한 id 를 생성해 줍니다.
• %2$s : %2$s 도 %1$s 와 같은 역할을 합니다. 워드프레스에서 자세한 설명이 안 되어 있어서 잘 모르겠는데, class에 %2$s 파라미터를 추가해 주면 자동적으로 고유한 class name을 생성해 주는 역할을 합니다.
• after_widget : 각각의 위젯 뒤쪽에 위치하는 HTML 태그로 before_widget에 사용한 태그와 짝을 이루고 있습니다.
• before_title : 각각의 위젯 타이틀 앞에 위치하는 HTML 태그로 h2, h3, h4와 같은 헤딩테그를 사용하면 됩니다.
• after_title : 각각의 위젯 타이틀 뒤에 위치하는 HTML 태그로 before_title 파라미터와 짝을 이루고 있습니다.

참고 : Widgets API, Function Reference/register sidebar

템플릿 파일에 위젯 영역 만들기

‘Appearance>Widgets’ 페이지에 위젯 영역이 만들어지고 그 영역에 위젯을 등록한 후에는 해당 위젯들이 실제로 웹페이지에 출력이 될 수 있도록 템플릿 파일에 아래와 같은 코드를 붙여넣기 해야 합니다.

<?php if ( function_exists('dynamic_sidebar') && is_dynamic_sidebar('After Title') ) : ?>
<?php dynamic_sidebar('After Title'); ?>
<?php endif; ?>

위 코드에서 dynamic_sidebar 함수는 해당 위젯 영역에 있는 위젯들을 차례대로 해당 위치로 호출하는 역할을 합니다. 즉 위 코드의 의미는사용중인 워드프레스가 dynamic_sidebar 함수를 지원하는지 확인하고 dynamic_sidebar에 ‘After Title’ 이라는 위젯 영역이 있을 때에만, ‘After Title’ 위젯 영역에 있는 위젯들을 출력하라는 의미를 담고 있습니다. 여기서 ‘After Title’은 functions.php에서 지정한 위젯영역의 name 파라미터입니다.

참고 : Function Reference/dynamic sidebar

포스트의 제목 밑에 위젯 추가하기

사이드바 외에 위젯이 가장 필요한 영역은 아마도 포스트 제목 바로 밑이 아닐까라는 생각이 듭니다. 여기에 보통 애드센스 광고나 포스팅 후에 나중에 추가로 변경사항 등을 입력하고 싶을 때 필요합니다. 워드프레스는 포스트에서 작성한 글은 single.php 템플릿 파일을 사용해서 출력을 합니다.(참고 : 워드프레스 페이지의 우선 순위) 여기서는 Twenty Ten 테마를 예로 들어 설명을 하겠습니다.

우선 만일을 대비해서 수정하기 전에 wp-content/themes/twentyten 디렉토리에서 컴퓨터로 single.php를 백업 받습니다. ‘Appearance>Editor’로 가서 single.php를 선택해서 아래와 같이 제목 밑에 위의 코드를 삽입합니다.

					<div class="entry-meta">
						<?php twentyten_posted_on(); ?>
					</div><!-- .entry-meta -->

<?php if ( function_exists('dynamic_sidebar') && is_dynamic_sidebar('After Title') ) : ?>
<?php dynamic_sidebar('After Title'); ?>
<?php endif; ?>

					<div class="entry-content">
						<?php the_content(); ?>

위에서 twentyten_posted_on()은 Twenty Ten 테마에서만 사용되는 함수로 포스트의 작성자, 작성시간 등을 출력하는 역할을 합니다. 맨 아래 줄에 있는 the_content()는 포스트나 페이지의 에디터 박스에서 작성한 내용을 출력하는 워드프레스 템플릿 태그입니다.

주의해야 할 점은 php의 시작태그 <?php와 종료태그 ?> 내부에 또 다른 php 시작태그와 종료태그가 들어가서는 안 됩니다. 즉, 위와 같이 php 태그 외부에, HTML 태그들이 있는 곳에 넣어야 합니다.

구 버전의 테마 메뉴를 3.0 버전의 메뉴 시스템으로 수정하기

워드프레스가 3.0 이상의 버전일 경우, 알림판에 ‘Appearance>Menus’라는 메뉴를 지원하는데, 여기서 메뉴를 선택하고 순서를 조정할 수 있습니다. 만약 테마가 3.0 메뉴 시스템을 지원하지 않을 경우, 아래와 같은 메세지를 보여줍니다.

The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.

Menus 메뉴에서 Theme Locations 생성하기

우선 ‘Appearance>Menus’에서 생성한 메뉴들을 ‘Theme Locations’에 배치를 하기 위해서 ‘Theme Locations’를 생성해야 하는데, functions.php를 약간 수정을 해 줘야 Themes Locations를 사용할 수 있습니다. 문제가 발생할 경우를 대비해서, 수정 전에 반드시 계정에 접속해서 wp-content/themes/ 디렉토리에 있는 해당 테마의 functions.php와 header.php를 컴퓨터로 백업 받습니다.

‘Appearance>editor’ 에서 functions.php에 아래의 코드를 붙여넣기 합니다.

add_action('init', 'my_menu');
function my_menu() {
	if (function_exists('register_nav_menu')) {
		register_nav_menu('top-menu' => __( 'Top Menu' ));
	}
}

위에서 add_action 함수를 통해서, init Action Hook이 실행될 때, 바로 밑에 줄에 있는 my_menu 라는 함수가 실행이 되도록 하고 있습니다.

my_menu 라는 함수명은 임의로 만든 것인데, 그 함수 안에서 register_nav_menu 함수를 통해서, Top Menu 라는 메뉴를 워드프레스 관리자메뉴에 추가하도록 하고 있습니다. Top Menu는 관리자 메뉴에 나타나는 이름으로 적당히 만들면 되지만, 그 왼쪽에 있는 top-menu의 이름은 함수내부에서 사용이 되므로 공백없이 사용해야 합니다.

그리고, if (function_exists()) 문을 통해서 현재 사용하는 워드프레스가 register_nav_menu를 지원하는지 체크를 하고 있습니다.

만약 템플릿 내에 각각 독립적인 여러 개의 메뉴를 만들고 싶다면 아래와 같이 register_nav_menus 함수(끝에 s 가 붙어 있음)와 배열(array)를 사용해야 합니다.

add_action('init', 'my_menu');
function my_menu() {
	if (function_exists('register_nav_menu')) {
		register_nav_menus(
			array(
				'menu_1' => __( 'menu 1' ),
				'menu_2' => __( 'menu 2' ),
				'menu_3' => __( 'menu 3' )
			)
		);
	}
}

위의 두 코드 중에 하나를 복사해서 functions.php 파일에 붙여넣기 해야 하는데, 잘 못 붙이면 워드프레스의 작동에 문제가 생길 수 있습니다. 그럴 땐 백업받은 functions.php을 해당 디렉토리에 덮어쓰기 하면 원 상태로 복구가 가능합니다.

잘 모르겠으면 funtions.php 함수 젤 밑에 줄에 붙여넣기 하면 됩니다. 만약 맨 마지막이 php 종료태그 ?>로 끝난다면 물음표 바로 앞에 커서를 가져가서 거기에 엔터를 쳐서 빈 줄을 만들고 그 빈 줄에 위의 두 개의 코드중에 하나를 붙여 넣기 하면 됩니다. 만약 종료태그 없이 끝이 난다면 그냥 맨 밑 줄에 빈 줄을 만들어서 위 코드를 붙여 넣기 하면 됩니다. 여기서는 세 개의 독립적인 메뉴를 사용할 수 있는 두 번째 코드를 사용해서 메뉴를 만들어 보겠습니다.

functions.php에 붙여넣기가 제대로 되었다면 ‘Appearance>Menus’ 페이지의 Theme Locations에 왼쪽그림과 같이 세 개의 Location( menu 1, menu 2, menu 3 )이 새롭게 만들어진 것을 알 수 있습니다.

테마에 3.0 메뉴 적용하기

보통 HTML 템플릿은 메뉴를 다음과 같이 사용을 하고 style.css 파일에서 적당히 스타일링을 합니다.

<div class="menu">
	<ul>
		<li><a href="http://yoursite.com/">HOME</a></li>
		<li><a href="http://yoursite.com/about.html">ABOUT</a></li>
		<li><a href="http://yoursite.com/contact.html">CONTACT</a></li>
	</ul>
</div>

구 버전의 워드프레스 테마에서, 위와 같이 페이지로 가는 링크를 li 태그로 둘러 싸서 자동적으로 생성하는 wp_list_pages와 wp_list_categories 함수들이 있습니다. 전자는 워드프레스에 페이지를 만들 때마다 메뉴에 그 페이지로 가는 링크를 출력을 하고, 후자는 카테고리 페이지로 가는 링크를 출력을 합니다. 여기서는 전자에 대해서만 알아 보겠습니다.

테마내에서 wp_list_pages 또는 wp_list_categories 함수는 header.php 템플릿 파일에 있는데, 보통은 아래와 비슷한 형태의 코드를 하고 있습니다.

<ul class="nav_menu">
	<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
	<?php wp_list_pages(); ?>
</ul>

wp_list_pages() 함수나 wp_list_categories() 함수는 홈으로 가는 링크는 생성하지 못하기 때문에 위에서와 같이, wp_list_pages 바로 윗 줄에 홈으로 가는 링크는 따로 만들어 둡니다.

위의 코드들은 아래와 같은 HTML로 출력이 됩니다.

<ul class="nav_menu">
	<li><a href="http://yoursite.com/">Home</a></li>
	<li><a href="첫번째 페이지 주소">첫번째 페이지 제목</a></li>
	<li><a href="두번째 페이지 주소">두번째 페이지 제목</a></li>
	<li><a href="세번째 페이지 주소">세번째 페이지 제목</a></li>
</ul>

워드프레스 3.0 에서는 앞에서 만든 menu 1 을 테마에 출력하려면 다음과 같이 사용을 합니다.

<?php wp_nav_menu( array( 'theme_location' => 'menu_1' ) ); ?>

만약 functions.php에서 메뉴를 하나만 만들었다면 theme_location 파라미터 없이 아래와 같이 사용을 하면 됩니다.

<?php wp_nav_menu(); ?>

위의 두 가지 코드중에 하나를 템플릿에 입력하고, 워드프레스 관리자 페이지의 메뉴 페이지에서 header 라는 메뉴 이름을 만들고, 그 메뉴를 menu 1 Location에 지정했다면 템플릿상에서 메뉴들은 다음과 같은 HTML 태그로 출력이 됩니다.(참고 : 버그인지 의도된 것인지는 모르겠으나, Theme Locations에서 메뉴를 지정해 주지 않으면 div 나 ul 의 class나 id 값이 제대로 반영이 안됩니다.)

<div class="menu-header-container">
	<ul id="menu-header" class="menu">
		<li id="menu-item-30" class="생략"><a href="주소">타이틀</a></li>
		<li id="menu-item-31" class="생략"><a href="주소">타이틀</a></li>
		<li id="menu-item-32" class="생략"><a href="주소">타이틀</a></li>
	</ul>
</div>

위의 wp_nav_menu가 출력한 HTML 태그와 그 위에 있는 wp_list_pages가 출력한 것을 비교해 보면 다음과 같은 것을 알 수 있습니다.

• wp_nav_menu는 메뉴 페이지에서 홈으로 가는 링크를 만들 수 있어서, 따로 홈으로 가는 링크를 출력하는 코드를 템플릿에 만들 필요가 없음.
• wp_nav_menu는 wp_list_pages와 달리 li 앞에 ul 과 div 태그를 출력함.
• wp_nav_menu 에서는 div에 클래스명이 추가 되었고 ul 에는 클래스와 아이디가 추가 되었음.

다른 점이 더 있지만 스타일링에 필요한 중요한 차이점은 위와 같습니다.

구 버전의 메뉴를 레이아웃이 깨지지 않으면서 3.0 버전으로 바꾸기 위해서는 3.0 메뉴에서 출력되는 html 태그들을 구 버전과 똑같게 만들어 주면 됩니다.

우선 3.0 메뉴에서 아래와 같이 파라미터를 추가해주면 div 요소를 제거할 수 있습니다.

<?php wp_nav_menu( array( 'theme_location' => 'menu_1', 'container' => '' ) ); ?>

아래와 같이 파라미터를 추가해 주면 ul 요소도 제거가 가능합니다.

<?php wp_nav_menu( array( 'theme_location' => 'menu_1', 'container' => '', 'items_wrap' => '%3$s' ) ); ?>

따라서, 앞에서 예를 든 wp_list_pages를 사용한 구버전의 메뉴를, 아래와 같이 바꾸면 레이아웃 깨짐 없이 바꿀 수 있게 됩니다.

<ul class="nav_menu">
	<?php wp_nav_menu( array( 'theme_location' => 'menu_1', 'container' => '', 'items_wrap' => '%3$s' ) ); ?>
</ul>

위와 같이 ul 요소를 없애는 방법 대신에, 아래와 같이 ul 요소는 살려두고 ul의 class를 맞춰주면 더욱 간단하게 만들 수 있습니다.

<?php wp_nav_menu( array( 'theme_location' => 'menu_1', 'container' => '' , 'menu_class' => 'nav_menu') ); ?>

위에서 menu_class 파라미터가 ul 요소의 class 명을 만드는 역할을 합니다. 위 코드는 바로 그 위에 있는 코드와 동일한 HTML 태그들을 출력합니다. 더 많은 파라미터들이 있는데 그 내용은 아래 사이트를 참고하기 바랍니다.

참고 사이트 : Function Reference/wp nav menu

웹 페이지 내부에 독립적인 메뉴를 더 만들고 싶다면 menu_1 대신에 menu_2를 사용해서 적당한 곳에 아래와 같은 코드를 삽입하고 레이아웃에 맞게 파라미터를 추가해 주면 됩니다.

<?php wp_nav_menu( array( 'theme_location' => 'menu_2' ) ); ?>

Blog Introduction – 카테고리,태그,Archive 페이지에 소개글 넣기

다운로드 : Blog Introduction

워드프레스는 글 목록을 출력하기 위해서 보통 Loop 문을 사용을 합니다. Blog Introduction 플러그인은 각 페이지에 있는 Loop 문을 찾아서 그 위쪽에 자동으로 소개글을 삽입합니다.

카테고리나 태그 또는 author 페이지에 소개글을 삽입하려면 페이지 글을 작성해야 합니다. 여기서 작성한 페이지 글을, 나타내고자 하는 페이지에 연결해 줘야 하는데, Blog Introduction 플러그인은 slug를 서로 맞춰서 연결하는 방식으로 되어 있습니다.

예를 들면 카테고리의 slug가 theme 이라면 작성한 페이지의 slug는 theme-cat-intro가 되어야 합니다. 만약 Tag에 소개글을 삽입하려고 하고, Tag의 slug가 plugin 이라면 작성하는 페이지의 slug는 plugin-tag-intro가 되어야 합니다. (단, 메인페이지에 사용되는 페이지글의 slug는 blog-introduction 이어야 합니다.)

작성할 페이지의 slug는 해당 페이지의 제목에 의해서 결정이 되기 때문에 위와 같이 할 경우에 카테고리의 페이지에 사용할 페이지 글의 제목은 theme cat intro가 되어야 하고, 태그에 사용될 페이지 글 제목은 plugin tag intro가 되어야 합니다.

발행할 때에는 보호글(Private)로 발행하면 됩니다. 그러면 해당 페이지의 제일 상단에 해당 페이지글이 나타나게 됩니다. 이후에 적당히 해당 페이지글의 제목을 변경하면 됩니다. 발행한 후에 제목을 변경하면 slug는 변동이 없기 때문에 수정된 제목으로 해당페이지에 소개글로 나타나게 됩니다.

왼쪽에 나오는 옵션들 중에 These Setting이라는게 있는데 이것을 선택하면 페이지글을 만들지 않고도 옵션창의 ‘page id/permalink’, ‘Heading’, ‘Content’ 에 입력한 내용을 소개글로 사용할 수 있습니다. 하지만 하나의 페이지에만 적용이 가능합니다.

만약 소개글이 나오지 않는다면 Show intro, Show heading, Show content 설정을 Yes로 했는지, 그리고 Get introduction text from 설정을 page로 했는지 확인해 봐야 합니다. 또는 테마나 플러그인에 따라서 Loop가 두개 이상일 수도 있으므로 Intro before nth loop의 숫자도 조정해 봐야 합니다.

Twenty Ten 테마의 카테고리에 소개글 넣기

Blog Introduction 플러그인을 사용해서 작성한 소개글은 해당페이지의 제목과 글 목록 사이에 위치하게 되는데, 해당 페이지에 대한 간단한 설명을 추가할 목적으로 사용한다면 그대로 사용하면 됩니다. 하지만 좀 더 나아간다면, 소개글 위에 위치하는 해당 페이지의 제목을 지우고 소개글의 헤딩을 해당 페이지의 제목으로 대체하는 것이 검색엔진 최적화의 측면에서 조금 더 유리합니다.

우선 ‘Appearance>Editor’에서 category.php 파일을 선택하면 아래와 같은 부분이 있습니다. 카테고리를 생성할 때 입력한 name을 제목으로 출력하는 부분입니다.

<h1 class="page-title"><?php
					printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );
				?></h1>

위에서 single_cat_title();가 name에 입력한 내용을 출력하는 함수입니다. 간단한 테마의 경우는 아래와 같은 방법으로 카테고리의 제목을 출력하기도 합니다.

<h1><?php single_cat_title(); ?></h1>

그리고 아래와 같은 부분이 있는데 카테고리 생성시에 입력한 description을 출력하는 역할을 합니다.

$category_description = category_description();
					if ( ! empty( $category_description ) )
						echo '<div class="archive-meta">' . $category_description . '</div>';

위에서 category_description(); 함수가 description을 출력하는 역할을 합니다. 간단한 테마의 경우에는 아래와 같은 방법으로 description을 출력하기도 합니다.

<p><?php category_description(); ?></p>

Blog Introduction 플러그인을 사용한 소개글로 카테고리 제목을 대체하기 위해서, 해당 페이지에 소개글을 입력한 후에, Twenty Ten 테마의 category.php 템플릿 파일에서, 아래와 같이, 위의 두 부분을 삭제합니다. 그러면 소개글 헤딩이 해당 페이지의 제일 위에 위치하게 됩니다.

<div id="content" role="main">

			<?php

				/* Run the loop for the category page to output the posts.
				 * If you want to overload this in a child theme then include a file
				 * called loop-category.php and that will be used instead.
				 */
				get_template_part( 'loop', 'category' );
				?>

			</div><!-- #content -->

이제 소개글의 헤딩과 내용을 적당히 스타일링 해 주면 됩니다. Blog Introduction의 옵션에 가면 inline style로 속성을 지정할 수 있습니다.

먼저, ‘Wrapper tag for heading’ 항목에 h1 태그를 사용할지 h2 태그를 사용해야 할 지 결정해야 하는데, h1 태그가 가장 이상적입니다. 하지만 하나의 웹페이지 내에서 한번만 사용가능하기 때문에 웹페이지 내의 다른 곳(주로 웹페이지 상단의 블로그 타이틀)에 이미 h1 태그가 쓰였다면 h2를 사용해야 합니다. Twenty Ten의 경우는 h1을 사용하면 됩니다.

Style for intro container 항목에 아래와 같이 적당한 속성과 속성값을 사용해서 소개글이 나타나는 네모형태의 영역을 스타일링 합니다.

background:#f3f3f3;padding:5px;margin-bottom:20px;

Style for heading 항목에 아래와 같은 값을 입력해서 ‘Wrapper tag for heading’ 항목에 입력한 헤딩 태그를 테마와 어울리게 스타일링 합니다.

font-weight:bold;font-size:21px;border-left: 10px solid #9932cc;padding-left:10px;

Style for content에도 위와 같은 방식으로 적당한 속성과 속성값을 입력하면 됩니다. 여기서는 그냥 비워두었습니다.

아래 스크린샷은 Twenty Ten 테마의 uncategorized 카테고리에 소개글을 입력한 후에 위와 같이 스타일링을 했을 때의 모습입니다.

위에서 보면 카테고리 생성시에 입력한 name이 ‘Category Archives:’ 라는 라벨과 함께 카테고리 제목으로 출력되지 않는 것을 알 수 있습니다. 카테고리 name에 입력한 내용은 웹페이지의 메뉴바나 사이드바의 카테고리 라벨 또는 검색엔진의 검색결과에만 나타나게 됩니다.

그래서 여기서는 카테고리 페이지나 태그 페이지에 있는 글들도 순서를 조정할 수 있게 하는 플러그인을 소개할까 합니다. 물론 메인페이지의 글 순서도 어느 정도는 조정이 가능합니다.

카테고리와 태그 페이지의 글 순서 조정 플러그인 – AStickyPostOrderER

워드프레스 버전 2.3 이상 2.9.2 까지 사용가능하다고 되어 있는데, 3.0.2 버전에서도 동작을 합니다.

다운로드 : AStickyPostOrderER

AStickyPostOrderER 플러그인을 설치하고 활성화하면 Tools 메뉴에 AStickyPostOrderER 메뉴가 새로 생깁니다. 클릭하면 아래와 같은 설정화면이 나옵니다.

글 순서를 조정하고 싶은 태그나 카테고리를 선택해서 해당 포스트 오른쪽 끝에 있는 입력창에 숫자로 순번을 입력하면 됩니다. ’0′을 입력하면 기본 설정으로 돌아갑니다.

Metastickyness에서 sub-sticky, defaul, droppy 라디오 버튼은 선택해서 메인페이지에 나타나는 카테고리들간의 우선순위를 지정해 줄 수 있습니다. 만약 sub-sticky로 지정된 카테고리의 글 수가 많아지면 해당 카테고리보다 낮은 순위에 속해있는 카테고리의 글들은 아무리 최신 글이라도 메인페이지에 나타나지 않게 됩니다.

Super-sticky에서는 카테고리당 몇 개의 글이 메인페이지에 맨 위쪽에 나오는지 숫자로 지정할 수 있어서 이러한 단점을 보완할 수 있습니다. 하지만 Super-sticky limit을 지정하게 되면 해당 카테고리에 있는 포스트의 순서에도 영향을 끼쳐서 카테고리내의 글 순서가 조금 복잡해지는 경향이 있습니다.

AStickyPostOrderER 플러그인과 워드프레스의 Sticky Post 기능을 같이 사용하면 좀 더 메인페이지와 카테고리의 글 순서를 조정하기 쉽습니다.