WordPress에서 장문의 긴 글을 작성했을 때, 만약 해당 글을 index 페이지에선 그 내용을 다 보여주지 않고 글 앞부분의 도입부만을 보여주고 싶을 때를 대비해 more tag로 처리하는 기능을 제공한다. 그런데 이 기능을 그대로 가져다 쓰면 웹 접근성 면에서 문제가 생길 수 있다.

이렇게 해서 자동 생성된 링크 텍스트는 기본적으로 그냥 무의미한 more…로 표시되는데, 만약 글의 앞뒤 문맥을 인지하지 못한 상태에서 해당 링크를 스크린 리더를 통해 접근했을 땐 해당 링크가 어느 곳을 가리키는지 알 수가 없는 것이다. 하지만, 다행히 WordPress의 the_content() 함수를 제대로 쓰면 이 more tag의 내용을 입맛에 맞게 수정할 수가 있다.

the_content() 함수는 일반적으로 WordPress에서 사용되는 The Loop라는 PHP 코드 안에서 쓰이는데, 보통 WordPress 테마 파일의 index.php나 혹은 최신 WordPress에서 기본 제공하는 Twenty Twelve 테마 같은 경우 post의 종류에 맞는 여러 군데의 템플릿(template)에 사용되고 있으며 상황에 맞게 각기 따로 수정해 주어야 한다. WordPress의 more tag 접근성 문제(이)란 제목의 글 마저 읽기 →

JavaScript 파일은 페이지 로딩 속도 측면에서 페이지의 body가 닫히기 바로 전에 추가해 주는 것이 가장 좋은데, WordPress에 기본적으로 추가된 jQuery는 꼭대기 head 부분에 붙어 있다.

이놈을 맨 아랫부분에 추가하려면, 테마 파일에 있는 functions.php 파일을 열고 WordPress의 wp_register_script()와 wp_enqueue_script() function을 사용하는 다음과 같은 코드를 추가해 준다.

<?php
function my_scripts_enqueue() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, NULL, true);
  wp_enqueue_script('jquery');
}
 
if (!is_admin()) add_action('wp_enqueue_scripts', 'my_scripts_enqueue', 11);
?> 

여기에 있는 wp_register_script() function의 parameter 중 네 번째와 다섯 번째가 중요한 요소인데, 각각 $ver과 $in_footer 변수를 의미한다.

$ver 변수는 보통 JavaScript 파일 경로의 마지막 부분에 query string처럼 붙으면서 JavaScript 파일이 갱신되었을 때 caching된 것의 사용을 막으려고 사용되는데, jQuery처럼 Google CDN에서 불러올 때는 오히려 방해되므로 NULL 값을 줘서 없애버린다. 그리고 $in_footer 값에 true를 주면 JavaScript가 body 맨 마지막 부분에 붙게 된다.

내용 갱신(2014년 6월 25일): 현재 설치된 WordPress 3.9.1 버전에선 위에서 설명했던 방법이 제대로 적용되질 않아서, 해결책을 검색한 결과 다음 페이지에서 해답을 얻을 수 있었다.: Unable to move wordpress jquery library into the footer – Stack Overflow

그래서, 가령 jQuery를 Google에서 호스팅하고 있는 것으로 바꿔서 페이지 마지막 부분에 추가해 주려면 functions.php 파일에 다음과 같이 등록해 준다.

<?php
function my_footer_enqueue_scripts() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, NULL, true);
    wp_enqueue_script('jquery');
}
 
if (!is_admin()) add_action('wp_enqueue_scripts', 'my_footer_enqueue_scripts');
?> 

나중에, Google에서 호스팅하고 있는 jQuery 버전이 갱신된다면, 위 코드에 작성된 jQuery의 호스팅 주소 중에 버전에 해당되는 부분만 새 것으로 바꿔주면 된다.

WordPress가 3.1로 갱신되었다는 소식을 듣고 얼른 갱신을 완료하였다. 그런데 한동안 있다 살펴보니 갑자기 블로그 옆구리에 달린 Category 링크가 작동하질 않았다.

문제의 원인을 알아보니, 평소 꼬리표 관리 기능 때문에 잘 쓰고 있는 Simple tags plugin과의 충돌로 밝혀졌다.

해결 방법은, Simple Tags 관리자 화면의 General 메뉴 속에 있는 Active tags for page 기능을 꺼주면 된단다.

귀가 너무 얇은 탓일까? WordPress Cache를 위한 plugin으로 여태 잘 쓰고 있던 WP Super Cache에서 Hyper Cache로 갈아탔다.

갈아타게 만든 계기는 여러 WordPress Caching plugin들을 비교한 글에서 보여준 비교적 높은 성능 때문이다.

그런데, 처음 설치하고 나서 설정 페이지를 열어보았더니, 다음과 같은 반갑지 않은 메시지를 맞이하였다.

Hyper Cache was not able to create the folder “cache” in its installation dir. Create it by hand and make it writable.

여기서, cache 디렉토리의 권한을 설정해 주려고 Hyper Cache 공식 페이지에 나와있는대로 /wp-content/hyper-cache/cache 디렉토리를 생성해서 권한을 변경해 주었는데도 경고 메시지가 사라지지 않았다.

확인해 보니 버전이 갱신되면서 기존 캐쉬 디렉토리가 다음과 같은 위치로 바뀌었단다. :
wp-content/plugins/hyper-cache/cache

설치를 마치고 둘러본 바, 워낙 트랙픽이 저조한 곳이라 큰 차이점은 못 느겼지만, 기름칠 한 번 더 해주었다고 생각해야지. 🙂

iPhone용 웹 애플리케이션 개발을 위한 JavaScript, CSS, 이미지들이 포함된 iUI – iPhone User Interface Library가 오랜만에 갱신되었다.

iUI 0.20 갱신 내용

WordPress의 iPhone용 인터페이스 제작 기법을 참고해서 만든 이 곳 블로그의 iPhone용 인터페이스에도 iUI가 사용되고 있는데, 새로운 파일을 덮어씌우고 기본 그림 배경을 흰색으로 바꾸는 작업으로 간단하게 갱신 완료.

그나저나, iPhone을 내 손아귀에 쥐어볼 수 있을 날은 언제일지…