WordPress.org
WordPress.org
Get WordPress

Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

ko:Writing Code in Your Posts

This article is marked as in need of editing. You can help Codex by editing it.

Languages: English • 한국어 • (Add your language)

워드프레스 플러그인이나 코드(hacks)를 작성하거나, 또는 자신의 워드프레스 사이트에 약간의 코드를 추가하거나 HTML, CSS, PHP, 자바스크립트 같은 프로그래밍 코드 추가를 원하는 경우이든지 간에, 블로거는 자신의 글에, 실제로 코드 처럼 보이지만, 코드 처럼 행동하지 않는, 코드를 자주 추가한다.

기본으로, 워드프레스 글 편집기에서 코드를 작성하거나 붙여 넣은 코드는 비주얼을 사용했는지 또는 텍스트(HTML 글 편집기)를 사용했는지에 따라 해석된다. 비주얼 편집기에서는 코드를 일반 텍스트로 인식하고, < and > 문자는 상응하는문자 엔터티 &lt; and &gt; 로 변환(코드화)된다. 그래서 이 코드는 웹브라우저가 해석하지 않는다. 따옴표도 변환된다. 그러나 워드프레스는 기본으로 자동 수정을 적용하여 텍스트는 언어 특성에 따라 적절하게 인용된다. 텍스트(HTML 편집기)는 이런 문자를 변환하지 않으므로, 코드 예제로 사용하는 HTML과 CSS 마크업은 웹브라우저가 인식한다. 그러므로 이상한 모습이 되고 레이아웃이 엉망이 될 수도 있다.

이 문제는 워드프레스 버전, 글 편집기, 사용된 플러그인에 따라 다를 수 있다. 워드프레스 이전 버전에서, < and > 문자가 &lt; and &gt; 문자 엔터티로 변환되는 것을 인식하지 못하여, 글에서 HTML 태그가 발견되면, 태그가 그 상태로 남아 있어, 웹브라우저가 이것을 해석하였다.

일반적으로, 웹페이지에서 코드를 사용 방법은 두 가지 이다. 설명하고 있는 코드(code)를 강조하기 위해 단락 내에 있는 코드 와 강조되는 코드가 있다… 

…in such a way as to look 
like a block of code.

단락 내의 코드

텍스트를 고정폭 폰트(monospaced font)로 변경하는 2개의 HTML 태그가 있다. <code>와<tt>이다. 후자는 요즘 덜 사용되고, 좀 더 유용하고 의미에서도 정확한 <code>로 대체되고 있다. 이 태그로 컴퓨터 코드 문자와 일반 문자를 구별할 수 있다. 

This is an example which mentions code within a paragraph,
namely the functions <code>wp_title()</code>, 
<code>wp_content()</code> and <code>wp_footer()</code>, 
which are very useful in WordPress.

이것은 비 HTML 텍스트를 코드처럼 보이게 하는 좋은 방법이다. 그러나 다음 예제에서 HTML 태그는 어떨까? 

In the header.php template file, 
look for the <code><div class="header"></code> 
section to change the <code><h1></code> heading.

<code> 태그를 사용하면 워드프레스는 이 태그 안의 HTML 마크업을 인코딩하지 않고, 또는 글에서 이 태그를 제거하지 않는다. 워드프레스는 이 마크업을 서식으로 사용하고 있다고 인식하고, 그대로 둔다. 어떤 웹 브라우저에서는 <div> 태그 다음에 있는 <code> 태그를 인식하고, 웹 페이지에 새 콘테이너를 만든다. 이 후에 비슷하게, <h1> 시작 태그를 인식하면, 아래와 같이 전체 웹 페이지 레이아웃이 엉망이 된다:

In the header.php template file, look for the

leaf.gif
section to change the heading.

이 문제를 방지하기 위애, 웹 브라우저가 HTML 태그의 시작과 끝으로 인식하는 왼쪽과 오른쪽의 화살표 문자를 나타내는 문자 엔터티 또는 확장 문자를 아래와 같이 사용한다: 

In the header.php template file, 
look for the <code>&lt;div class="header"&gt;</code> 
section to change the <code>&lt;h1&gt;</code> heading.

단락 내의 URL

기본으로, 워드프레스는 http:로 시작하는 모든 문구를 링크로 설정한다. 워드프레스 사이트 내의 특정 글을 링크하는 방법에 대한 예제를 제시하고 있다면, http://example.com/index.php?p=453' '로 입력하면 링크로 변경된다. 슬래시를 대신 확장 문자로 사용하면 워드프레스는 이것을 링크로 "인식하지 않는다". 

...link to a specific WordPress post using 
<code>http:&#47;&#47;example.com&#47;index.php?p=453</code>
in your post....

문자 엔터티 목록

이 문서의 주제와 관련 있는 HTML 문자 엔터지 목록이다: 

< = &lt; or &#60;
> = &gt; or &#62;
/ = &#47;  	
] = &#93;
[ = &#91;
" = &quot; or &#34;
' = &#39;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
& = &amp; or &#38;

HTML 태그를 자동으로 문자 엔터티로 바꾸는 데 도움이 되는 자료 목록이 아래에 있다.

<pre> 태그 사용

코드를 따로 설정하여, 코드 상자처럼 보이게 할 수 있다. 이것은 다른 코드 또는 템플릿 파일에 복사하여 붙여 넣기 할 수도 있다. <pre> HTML 태그를 사용한다.

<pre> 태그는 브라우저에게 고정폭 글꼴 (monospaced font)을 사용하고, <pre> 태그 안에 내용을 그대로(exactly) 표시하도록 지시한다. 모든 공란, 줄 바꿈, 모든 코드가 정확하게 표시된다. 

<h3>Section Three Title</h3>
<p>This is the start of a 
<a title="article on relationships" href="goodtalk.php">
good relationship</a> between you and me....

<pre> 태그를 사용하는 것이 "멋지지는" 않지만, 사용하게 된다. 이 태그를 스타일링하는 방법은 다음 섹션에서 다룬다. 하지만 코드는 그대로 표시된다.

그대로(exactly)는 정확하게(EXACTLY)를 의미한다. 코드 줄(행)이 긴 경우, 코드를 감싸고 아무런 지시를 하지 않았기 때문에, 이 코드는 페이지를 벗어나서 표시된다. 다음은 그 예제이다: 

<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships" href="goodtalk.php">good relationship</a> between you and I and I think you should read it because it is important that we have these little <a title="article on communication" href="communication.php">conversations</a> once in a while to let each other know how we feel....

멋지지 않다, 안 그런가. 이 화면이 페이지를 벗어나지 않게 하기 위해서는, 줄 바꿈을 삽입해야 한다. 불행하게도, 복사된 코드를 표시하고자 할 때, 줄 바꿈을 삽입할 위치를 결정하는 것은 어려운 일이다.

프로그래밍 언어에 익숙하다면, 코드를 보기 좋게 줄 바꿈할 수 있을 것이다. 줄 바꿈할 위치를 잘 모른다면, 테스트해볼 수 밖에 없다. 코드를 삽입하여, 줄 바꿈을 하고, 테스트를 해본다. 제대로 수행되면, 거기에 줄 바꿈을 사용한다. 제대로 수행되지 않으면 줄 바꿈 위치를 변경한다.

긴 줄(행)의 코드가 있다면, 요약하여 표시하고, 텍스트 또는 PHP 파일에서 사이트에 있는 전체 코드에 대한 링크를 제공하거나, 일시적으로 코드를 보여줄 수 있는 online pastebins 중의 하나를 사용하는 것이 좋다.

코드 문제 해결

워드프레스 글에 코드를 사용하는 것은 도전이다. 이 코드는 워드프레스 기본 설정 스타일을 무시하고, 작성된 코드를 "수정"하는 필터를 사용하는 것일 수도 있다. 워드프레스 글에 코드를 사용하는데 어려움이 있다면, 이 섹셕이 도움이 될 것이다.

따옴표 자동 수정

글에 코드를 사용할 때 자주 발생하는 문제는, 대부분의 워드 프로세싱 프로그램에서 알려진, 워드프레스의 따옴표 자동 수정 기능이다. 기본으로, 웹페이지를 제공할 때, 워드프레스는, wp-config.php 파일의 언어 설치에 따라, "곧은(straight)" 따옴표를 시작과 종료 “굽은(curly)” 따옴표로 변환한다. 자동 수정 (지능형 따옴표(smart quotes)라고도 함) 기능은 비주얼 또는 텍스트(HTML 글 편집기) 모드와 관계없이 적용된다.

텍스트(HTML 글 편집기) 모드에서, 따옴표를 <code>, <tt>, <pre> 태그로 인용문을 감싸면 이 문제를 해결할 수 있다. 다른 방법은 따옴표를 각각의 문자 엔터티로 대체 사용하는 것이다. 사용 예: 

<p class="red">

대신에: 

<code>&lt;p class=&#34;red&#34;&gt;</code>

를 사용하는 것이다.

이전 버전에서는, 공개한 후에 페이지를 다시 편집하면, HTML 편집기가 이 모든 문자 엔터티를 해당 문자로 교체한다. 예를 들어, 따옴표로 &#34;를 사용한 경우, 다시 "로 표시된다. 그리고 저정하면, 자동 저장 기능이 영향을 미치게 된다.

code 태그 스타일링

기본으로, <code>, <tt>와 <pre> 태그를 사용하면 고정 폭 글꼴(monospaced font)이 설정되고, <body> 태그의 글꼴 크기를 사용한다. 글꼴 크기를 다르게 적용하고, 색상을 다르게 적용하려면 어떻게 할까?

현재 워드프레스 테마 디렉터리에 있는 style.css 스타일시트 파일에 이 2개의 태그에 스타일을 추가한다. 아래 스타일을 사용할 수 있다: 

pre {border: solid 1px blue;
	font-size: 1.3 em; 
 	color: blue; 
	margin: 10px; 
	padding:10px; 
	background: #FFFFB3}
code {font-size:1.2em; 
	color: #008099}

이제 <code> 태그를 사용하면, 이와 같이 보이고, <pre> 태그를 사용하면 아래와 같이 표시된다:

pre {border: solid 1px blue;

     font-size: 1.3 em;
     color: blue;
     margin: 10px;
     padding:10px;
     background: #FFFFB3}
code {font-size:1.2em;

     color: #008099}

자료

코드를 자주 사용하는 사용자

글에 수식, 함수, 프래그래밍 코드를 많이 사용한다면, 전체 처리과정을 쉽게 할 수 있도록 플러그인 또는 PHP 도구를 사용하는 것이 좋다. 글에 많은 코드 블록(예제 코드)을 게시한다면, Paste Bin에 코드를 붙여 넣어 사이트에 링크하는 것이 좋다.

코드를 붙여넣는 도구(Paste Tools)

Retrieved from "https://codex.wordpress.org/index.php?title=ko:Writing_Code_in_Your_Posts&oldid=136473"

Codex Resources