워드프레스 테마 가이드 : 1-4

http://www.urbangiraffe.com/2005/04/12/themeguide1/4/

2. 그러면….. 뜯어발겨 볼까요?

자, 우리는 테마에서 스타일을 모두 벗겨내었습니다. 이제 남은 것은 본문 뿐이에요. 실제로 아직 테마에는 기본적인 배치 구조들이 남아 있기 때문에 완벽하게 본문만 남았다고 하기는 어렵겠지요. 우리가 보고 있는 이 테마에는 아직 다음과 같은 구조들이 남아 있습니다.

  1. 타이틀
  2. 덧글이나 트랙백 영역을 포함하는 포스팅 본문
  3. 사이드바, 그러니까 메뉴겠지요.
  4. 푸터 섹션. 문서 아래쪽에 들어가는 것들 말입니다.

이 구조는 해당 테마 디렉토리에 들어있는 파일들에 정의되어 있어요. 이 내용을 살펴보면서 제일 먼저 시작할 파일은 index.php 입니다. 워드프레스를 실행했을 때 언제나 보이는 파일이지요.

<?php get_header(); ?>
 

  <div id=”content” class=”narrowcolumn”>

  <?php if (have_posts()) : ?>

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

           <div class=”post”>
               <h2 id=”post-<?php the_ID(); ?>”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>
               <small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

               <div class=”entry”>
                   <?php the_content(‘Read the rest of this entry &raquo;’); ?>
               </div>

               <p class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,”,'<strong>|</strong>’); ?>  <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>

               <!–
               <?php trackback_rdf(); ?>
               –>
           </div>

       <?php endwhile; ?>

       <div class=”navigation”>
           <div class=”alignleft”><?php posts_nav_link(”,”,’&laquo; Previous Entries’) ?></div>
           <div class=”alignright”><?php posts_nav_link(”,’Next Entries &raquo;’,”) ?></div>
       </div>

  <?php else : ?>

       <h2 class=”center”>Not Found</h2>
       <p class=”center”><?php _e(“Sorry, but you are looking for something that isn’t here.”); ?></p>
       <?php include (TEMPLATEPATH . “/searchform.php”); ?>

  <?php endif; ?>

  </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

자, index.html 파일을 보시는 대로, 네 부분으로 나누어 보았어요. 자세한 사항은 생략하고, 직관적으로 살펴봅시다. <?php … ?>로 되어 있는 부분이 눈에 띄이겠죠? 이것은 php의 함수를 사용하는 부분입니다. 사용자가 페이지를 볼 때, 웹서버의 PHP 인터프리터는 각 태그에 해당하는 값을 생성하여 돌려줍니다. 사용자가 PHP에 대해 조금도 알지 못하더라도 우리는 이런 내용들을 볼 수 있지요. 일단 첫번째와 세번째, 그리고 네 번째 부분에 대해 보겠습니다. 가운데 본문 부분은 나중에 살펴보도록 해요.

get_header () ? loads header.php
get_sidebar () ? loads sidebar.php
get_footer () ? loads footer.php

이 함수들은 보이는 그대로, 더 작은 단위로 디자인을 나누어 코드를 단순하게 하고 각 부분에 집중할 수 있도록 해 줍니다. 여기서는 일단 이대로는 가지 않을 겁니다. 모든 코드를 index.php에 넣고 실험해나가게 되겠지요. 하지만 이렇게 나누는 방식은 유용하고 이후에는 이 방식을 따르게 될 것입니다.

워드프레스 테마 가이드 : 1-3

http://www.urbangiraffe.com/2005/04/12/themeguide1/3/

-스타일을 적용해 봅시다

워드프레스 관리자 페이지로 들어가  ‘presentation’ 옵션을 선택합니다. 여기 화면 캡처나 메뉴 설명은, 제가 이번에 호스팅 옮기면서 한글판 설치하며 새로 캡처해 넣을 생각이예요. 하여간 여기서 아까 수정했던 MonkeyMagic 테마를 선택합니다.

자, 이제 다시 블로그 첫 화면을 보면….. (화면이 너무 길어서 중간에 잘랐어요 ^^) 다음과 같습니다. 솔직히 안 예쁘죠? 괜찮아요. 이게 우리가 원하던 결과입니다. 지금 보는 화면은 기본 디자인이고, 여기에 우리 나름대로의 테마를 만들어 볼 거예요.

워드프레스 테마 가이드 : 1-2

http://www.urbangiraffe.com/2005/04/12/themeguide1/2/

1단계. 나눌 것은 나누고

먼저 할 일은 기본 테마, 그러니까 큐브릭 테마를 복사하는 것입니다. 워드프레스에서 사용하는 테마들은 워드프레스가 설치된 경로 아래, wp-content/themes 에 들어 있습니다. 여기서 default 테마를 MonkeyMagic이라는 이름으로 복사합니다.

-테마 정리하기

자, 이제 이 테마를 우리 식대로 요리하기 위한 준비가 필요합니다. 모든 테마에는 테마의 이름, 저작자, 그리고 버전이나 요약 등 여러 잡다한 정보들이 포함되어 있습니다. 이런 정보들은 워드프레스에 관리자로 접속했을 때 presentation 섹션에서 확인할 수 있으며, 이런 정보가 없는 테마는 사용할 수 없습니다. 이 기본 정보는 style.css 파일에 정의되어 있습니다. 큐브릭 테마에 이미 존재하는 내용과 헷갈리는 것은 곤란하므로, 좋은 방법은 style.css를 삭제하고 새로 만드는 것이 되겠습니다.

/*
Theme Name: MonkeyMagic
Theme URI: http://www.urbangiraffe.com/
Description: Theme dissection example
Version: 1.0
Author: John Godley
Author URI: http://www.urbangiraffe.com/
*/

이 내용을 MonkeyMagic 테마 디렉토리에 복사하세요. 자, 이건 시작에 불과하죠?

-큐브릭 테마 삭제

그 다음으로…… 우리는 header.php에서 큐브릭 테마에서 사용되는 특별한 스타일들을 삭제하는 것이 좋겠습니다. 겁내지 마세요, 별 일 아니니까요. 다음 내용에서 빨강색으로 표시된 부분들만 날려버리면 충분합니다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head profile=”http://gmpg.org/xfn/11“>
   <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
   <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
   <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –>
   <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
   <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
   <link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
   <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
   <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
   <style type=”text/css” media=”screen”>
       /* BEGIN IMAGE CSS */
           /*  To accomodate differing install paths of WordPress, images are referred only here,
               and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
               not, then go right ahead and delete the following lines, and the image files. */
       body        { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickbgcolor.jpg”); }    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
           #page       { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickbg.jpg”) repeat-y top; border: none; } <?php } else { // No sidebar ?>
           #page       { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; } <?php } ?>
           #header     { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickheader.jpg”) no-repeat bottom center; }
           #footer     { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickfooter.jpg”) no-repeat bottom; border: none;}
           /*  Because the template is slightly different, size-wise, with images, this needs to be set here
               If you don’t want to use the template’s images, you can also delete the following two lines. */
           #header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
           #headerimg  { margin: 7px 9px 0; height: 192px; width: 740px; }
       /* END IMAGE CSS */
       /*  To ease the insertion of a personal header image, I have done it in such a way,
           that you simply drop in an image called ‘personalheader.jpg’ into your /images/
           directory. Dimensions should be at least 760px x 200px. Anything above that will
           get cropped off of the image. */
       /*
       #headerimg  { background: url(‘<?php bloginfo(‘stylesheet_directory’); ?>/images/personalheader.jpg’) no-repeat top;}
       */
   </style>
   <?php wp_get_archives(‘type=monthly&format=link’); ?>
   <?php wp_head(); ?>
</head>
<body>
<div id=”page”>
<div id=”header”>
   <div id=”headerimg”>
       <h1><a href=”<?php echo get_settings(‘home’); ?>”><?php bloginfo(‘name’); ?></a></h1>
       <div class=”description”><?php bloginfo(‘description’); ?></div>
   </div>
</div>
<hr />

워드프레스 테마 가이드 : 1-1

번역 끝나고 취합해서 문서로 만든 뒤! 링크 신고를 할 예정입니다.

http://www.drssay.com 의 세이군과 공동번역합니다. 저는 1장, 세이군은 2장……

페이지를 균일하게 맞추기 위해서 짧지만 페이지를 같은 곳에서 끊으며 가 보겠습니다.

==============================================================

http://www.urbangiraffe.com/2005/04/12/themeguide1/

워드프레스 블로거가 되는 일은 대단히 쉬운 일입니다. 마우스를 쥐고 설명을 따라하면 바로 인터넷에 당신만의 공간을 만들 수 있으니까요. 갓 설치한 워드프레스는 강력하고 매혹적인 툴이면서도 간단히 시작할 수 있어, 30분만에 블로깅을 시작할 수 있을 정도랍니다.

수 백 가지의 테마가 있지만 가장 널리 사용되는 것은 기본 테마인 큐브릭 테마입니다. 또는 블로그를 자신에게 맞게 수정하기 위해 직접 새로운 테마를 만들 수도 있지요. 한 달 정도 워드프레스를 운영한 블로그들은 많이 비슷비슷합니다. 뭔가 새로운 테마를 찾아보는 것은 힘들지요. 그 이유를 나는, 워드프레스의 구조에서 기인한다고 생각합니다. 약어와 온갖 복잡한 기술 속에서 멀미를 하는 초보자를 상상하는 것은 어려운 일도 아니었으니까요. 이런 점에서, 내가 워드프레스 테마에 대한 가이드를 쓰기로 결심한 것은 나를 위한 일이기도 했지만 워드프레스로 자신만의 공간을 만들기를 원하는 사람에게도 도움이 될 만한 일일 것입니다. 이 문서는 어떤 권리를 주장하지도 않을 것이고, 일반적인 상식과 디자인 원리에 의거하여 작성될 것입니다.

일단 독자 여러분들이 HTML이나 CSS에 대해 아주 초보적인 지식밖에 없다고 가정하고 이 문서를 작성할 것입니다. 그러니 가능한 모든 부분에 주석을 달아 볼 생각입니다. 이 가이드는 설명이 느린 편이지만 어느 정도 수준에 도달하면 빠르게 진행될 수도 있겠지요.

처음부터 테마를 만들기 시작하는 것 보다는 기존의 테마를 분석하고 각 부분을 나누어 중요한 부분에 집중하는 쪽으로 설명할까 합니다. 개인적으로 중요한 부분에 집중하고 나머지를 넘어가는 쪽이 훨씬 이해하기 쉬웠기 때문이지요. 이 과정에서 우리는 워드프레스 1.5의 테마인 큐브릭을 사용할 것입니다.

도표와 주석이 달린 코드를 적절하게 사용하여 설명할 생각입니다. 각 내용의 다른 단계나 번역문들도 오른쪽의 링크에서 바로 연결될 것이고요. 이 가이드의 첫번째 부분은 두 단계로 나뉘는데, 최소한의 스타일을 적용한 간단한 사이트를 만들어보는 과정이 될 것입니다. 쓸모있고, 그렇지 않더라도 흥미로운 내용이지요. 앞으로의 가이드는 테마를 더욱 분석하여 좀 더 근사하게 보이게 하는 방법을 다룰 것입니다.

form의 input에서 글작성시 언어 선택

form 에서 input의 기본 언어는 영어임.

한글입력상태를 기본으로 할 때
<input type=text size=10 style=”ime-mode:active”>

영문입력상태를 기본으로 할 때
<input type=text size=10 style=”ime-mode:inactive”>

xml 데이터의 php 변수 반환

http://life.qaris.net/life/17 에서 퍼옴

/*
//PHP를 이용한 XML Parse : 결과는 Array 로 리턴됨.
//파일을 이용한 XML 읽기 및 Parse
*/

//파일 읽기.
$file = “data.xml”;
if (!($fp = fopen($file, “r”))) {
die(“could not open XML input”);
}
$data = fread($fp, filesize($file));
fclose($fp);
//XML Parse 생성
$xml_parser = xml_parser_create();
//XML Parsing AND Free
xml_parse_into_struct($xml_parser, $data, $vals, $index);
xml_parser_free($xml_parser);
/*
//위 구문 설명
// 1. $vals 는 Parsing 결과가 저장되는 Array 변수임 .
// 2. foreach ( $vals as $xml_elem ) 을 통해 각 배열을 확인해보면
// $xml_elem 에는 tag | type | level | value | attributes 연관배열 Key값을 가진다.
// – tag : xml element name
// – type : open,complete,cdata,close 등의 값을 가짐
// – level : 네스팅 값을 가진 Root태그는 1 임.
// – value : VALUE
// – attributes : 연관 Array 임. (VALUE)
// 3. XML의 각 elements 와 attributes 는 대문자로 읽음.
*/

$params = array();
$level = array();
foreach ($vals as $xml_elem) {
if ($xml_elem[‘type’] == ‘open’) {
if (array_key_exists(‘attributes’,$xml_elem)) {
list($level[$xml_elem[‘level’]],$extra) = array_values($xml_elem[‘attributes’]);
} else {
$level[$xml_elem[‘level’]] = $xml_elem[‘tag’];
}
}
if ($xml_elem[‘type’] == ‘complete’) {
$start_level = 1;
$php_stmt = ‘$params’;
while($start_level < $xml_elem[‘level’]) {
$php_stmt .= ‘[$level[‘.$start_level.’]]’;
$start_level++;
}
$php_stmt .= ‘[$xml_elem[‘tag’]] = $xml_elem[‘value’];’;
eval($php_stmt);
}
}

echo ”

"; 
print_r ($params); 
echo "

“;

/*

Example :
I/P XML …

My Land
15E
40000

Hi State
1000
2000

13E
500
500

13E
500
5000

Low State
3000
20000

15E
5000
1500

O/P Array :
Array
(
[ZZ] => Array
(
[NAME] => My Land
[LOCATION] => 15E
[AREA] => 40000
[STATE1] => Array
(
[NAME] => Hi State
[AREA] => 1000
[POPULATION] => 2000
[CITY1] => Array
(
[LOCATION] => 13E
[POPULATION] => 500
[AREA] => 500
)

[CITY2] => Array
(
[LOCATION] => 13E
[POPULATION] => 500
[AREA] => 5000
)

)

[STATE2] => Array
(
[NAME] => Low State
[AREA] => 3000
[POPULATION] => 20000
[CITY1] => Array
(
[LOCATION] => 15E
[POPULATION] => 5000
[AREA] => 1500
)

)

)

)
*/
?>

[오라클] 합격자에게 학번 부여하기

입시를 치르고 학번을 부여하기 위해 다음과 같은 테이블을 살펴본다.

<<접수테이블>>
수험번호, 이름, 지망학과(3자리, FK), 합격자(합격자 1, 예비 2, 불합격 3)

<<학과코드>>
학과코드(4자리, PK), 학과이름, SORTKEY

<<입시용코드>>
학과코드_입시용(3자리), 학과코드(4자리, FK)

접수테이블에는 CHAR(7)의 학번이라는 필드가 있다.
접수자 중 합격자만 골라, 학과순으로 먼저 소트하고, 다음으로 이름순으로 소트하여 학번을 부여한다. 학번은 앞에 2자리는 06과 같이 년도를 나타내고, 뒤의 5자리는 소트한 순서대로 00001부터 입력한다.

해명은 아직 훈련중….. 이 문제를 해결하라고 하시는데, 사실 까짓거 변수 받아서 돌리면 간단하겠지만. PHP나 뭐나 쓰지 말고 그냥 SQL로만 하자는 것이 오늘의 관건. 대충은 알지만 sql에 아직 익숙하지 못하니 땅 파는 수 밖에;;

일단은 다음과 같이 쿼리하여 임시로 학번을 매겨보았다.

SELECT 접수테이블.수험번호, 접수테이블.이름, 학과코드.학과이름, 학과코드.SORTKEY,
(’06’|| lpad(rank() over (ORDER BY 학과코드.SORTKEY, 접수테이블.이름),5,’0′)) as rank, 접수테이블.학번
FROM 학과코드, 입시용코드, 접수테이블
WHERE (접수테이블.지망학과=입시용코드.학과코드_입시용)
AND (입시용코드.학과코드=학과코드.학과코드)
and (접수테이블.합격자=’1′)
ORDER BY 학과코드.SORTKEY, 접수테이블.이름;

여기서 rank에 들어간 가학번을 실제로 접수테이블에 입력하기 위해, 일단 위의 내용을 뷰로 만들고 다음과 같이 돌려보았다.

create view view_test as
SELECT 접수테이블.수험번호, 접수테이블.이름, 학과코드.학과이름, 학과코드.SORTKEY,
(’06’|| lpad(rank() over (ORDER BY 학과코드.SORTKEY, 접수테이블.이름),5,’0′)) as rank, 접수테이블.학번
FROM 학과코드, 입시용코드, 접수테이블
WHERE (접수테이블.지망학과=입시용코드.학과코드_입시용)
AND (입시용코드.학과코드=학과코드.학과코드)
and (접수테이블.합격자=’1′)
ORDER BY 학과코드.SORTKEY, 접수테이블.이름;

declare
cursor c is select * from view_test;
begin
for rec in c loop
dbms_output.put_line(rec.rank || ‘ ‘ || rec.수험번호);
update 접수테이블 set 학번=rec.rank where 수험번호=rec.수험번호;
end loop;
commit;
end;
/

제대로 입력되었다. 아예 뷰 대신 select문을 그 자리에 집어넣어 한번에 처리할 수도 있지만, 아직 정신없어서 두번에 나누었다.

또다른 방법으로 아예 다음과 같이 할 수 있다고도 한다.

SELECT ‘update sisjups set 학번=”’||
(’06’|| lpad(rank() over (ORDER BY 학과코드.SORTKEY, 접수테이블.이름),5,’0′))||
”’ where 수험번호=”’||접수테이블.수험번호||”’;’
FROM 학과코드, 입시용코드, 접수테이블
WHERE (접수테이블.지망학과=입시용코드.학과코드_입시용)
AND (입시용코드.학과코드=학과코드.학과코드)
and (접수테이블.합격자=’1′)
ORDER BY 학과코드.SORTKEY, 접수테이블.이름
/

이렇게 실행하면 각 수험번호에 대해 학번을 부여하는 update문이 펼쳐진다. 이 내용을 덤프하여 실행해도 같은 결과를 얻을 수 있다.

자바스크립트로 구현된 유닉스!

http://www.masswerk.at/jsuix/

아이고야……
예전에 자바스크립트로 구현된 PC통신….. 화면 같은 것들을 보고 놀라워 했던 적이 있다.
하지만 그 정도는 아무것도 아니라는 것을 오늘 KLDP 갔다가 보게 되었는데.

그야말로 간단한 유닉스 명령과 vi까지 구현되어 있는 것이었다. 설명에 의하면 가상 머신, 셸, 가상 파일 시스템, 프로세스 관리, 터미널, 그리고 키매핑…. 할 것은 다 했네. 그걸 무려.
자바스크립트로 말이다.

물론 요즘 아작!(아니, 보통은 아약스나 에이잭스 정도로 읽습니다) 덕분에
별별 희한한 장난을 치는 사람들이 늘어나고 있고 나도 소스 보느라 얼마전 책 한권 읽기도 했지만.
그래도 참, 저런 생각을 한 것도 구현을 한 것도 재미있다. 구경해 보고 싶은 사람은 guest로 들어가서 놀면 된다. 멋지다…… 자바스크립트 유닉스;; 자체는 오픈소스가 아니지만
터미널 라이브러리는 공개되어 있다. 할 수 있다면 이것으로도 멋진 장난을 칠 수 있을지도,