WordPress 단축 코드 및 샘플 스니펫 시작하기

게시 됨: 2021-02-18

WordPress 단축 코드는 2.5에서 도입되었으며 콘텐츠 내에서 사용할 매크로 코드를 만드는 데 도움이 됩니다. 생각해보면, 이것은 게시물에 동적 광고 스팟이나 클릭 유도문안 버튼과 같은 것을 만드는 좋은 방법입니다.

클릭 유도문안 예제를 사용하는 경우 블로그 게시물에 이와 같은 것을 추가하여 버튼을 표시한 다음 템플릿 functions.php 파일에서 출력을 편집할 수 있습니다.

 [button]

버튼을 사용자 정의하려면 다음과 같이 간단히 추가할 수 있습니다.

 [button type="twitter"]

또는 더 좋게 만들기 위해 둘러싸는 단축 코드를 사용할 수 있습니다.

 [button type="twitter"]Follow me on Twitter![/button]

약간의 상상력을 발휘하면 단축 코드의 잠재력과 이를 사용하여 수행할 수 있는 작업을 곧 깨닫게 됩니다. 이 기사에서는 이 세 가지 유형의 단축 코드를 만들고 사용하는 방법을 보여주고 WordPress 사이트에서 바로 사용할 수 있는 단축 코드를 보여 드리겠습니다.

자동 종료 단축 코드 만들기

가장 간단한 단축 코드는 자동 폐쇄 코드입니다. Twitter 계정에 대한 간단한 링크를 만든 다음 블로그 게시물에 추가합니다.

모든 코드는 /wp-content/themes/your-theme/ 에 있는 functions.php 에 들어갑니다. 없으시다면 생성하시고 코드를 넣으시면 됩니다.

 <?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>

용법:

 [button]

단순히 add_shortcode() 함수를 사용하여 모든 PHP 함수를 단축 코드에 연결할 수 있습니다. 이 간단한 예에서 우리가 하는 일은 Twitter 계정에 대한 링크를 반환하는 것뿐이지만 여기서 한 단계 더 나아가 몇 가지 매개변수를 추가해 보겠습니다.

매개변수를 사용하여 자동 닫힘 단축 코드 만들기

Shortcode는 매개변수를 지원하므로 출력을 사용자 정의할 수 있습니다. 이 예에서는 두 개의 다른 버튼이 있으므로 표시할 버튼을 정의해야 합니다.

 <?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>

이제 단축 코드에서 type 을 정의하여 표시할 버튼을 선택할 수 있습니다.

 [button type="twitter"] [button type="rss"]

이것은 훌륭합니다. 그러나 텍스트를 변경하려면 어떻게 해야 할까요? [button type="twitter-2"] 등과 같은 단축 코드 유형을 계속 추가할 수 있지만 그다지 동적이지는 않습니다. 그렇죠? 이 작업을 올바르게 수행하는 방법을 살펴보겠습니다.

둘러싸는 단축 코드 생성

둘러싸는 단축 코드를 사용하면 BBCode를 사용한 적이 있는 경우와 마찬가지로 단축 코드 내에 콘텐츠를 포함할 수 있습니다.

 <?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

이 단축 코드를 사용하려면 다음과 같이 사용하려는 텍스트를 포함했습니다.

 [button]Follow me on Twitter![/button]

이 버튼을 더 좋게 만들기 위해 이전 예에서 했던 것처럼 매개변수를 추가할 수 있습니다. 이번에는 Twitter 사용자 이름에 대한 매개변수와 버튼 스타일에 대한 매개변수 두 개를 추가해 보겠습니다. 그런 다음 다양한 유형의 버튼을 만들고 버튼을 연결할 Twitter 계정을 선택할 수 있습니다.

 <?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

용법:

 [button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: &lt;a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!&lt;/a>

이제 모든 Twitter 계정에 연결할 수 있는 사용자 지정 가능한 버튼이 생겼습니다. 이해하시겠지만 이보다 훨씬 더 고급 단축 코드를 만들 수 있지만 이것은 좋은 시작입니다.

위젯 및 템플릿 파일의 단축 코드

이제 단축 코드의 힘을 보았을 때 위젯과 템플릿 파일에서 단축 코드를 사용할 수 없는 이유가 궁금할 것입니다. 글쎄, 당신이 할 수 있습니다.

위젯에서 단축 코드를 활성화하려면 functions.php에 다음 코드를 넣으면 됩니다.

 add_filter('widget_text', 'do_shortcode')

템플릿 파일에서 단축 코드를 사용하려면 다음을 사용하여 액세스할 수 있습니다.

 do_shortcode("[button]");

바로 사용 가능한 쇼트

다음은 바로 구현할 수 있는 멋진 단축 코드입니다.

게시물의 코드

프로그래밍에 중점을 둔 블로그를 운영하는 경우 게시물에 코드를 표시하고 싶을 것입니다.

 function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');

용법:

 [code]&lt;?php echo 'Hello World!'; ?>

게시물 어디에나 애드센스 삽입

이 단축 코드를 사용하면 [adsense] 를 사용하여 게시물의 어디에나 Google 광고를 추가할 수 있습니다.

 function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');

YouTube 동영상 삽입

이 단축 코드를 사용하면 YouTube 동영상을 블로그 게시물에 포함할 수 있습니다.

 function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");

용법:

 // Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

페이팔 기부 단축번호

이것은 페이팔 계정에 대한 기부 링크를 만드는 데 도움이 되는 단축 코드입니다.

 function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');

용법:

 [donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

저자에 대한 개인 메모

이 마지막은 영리합니다. 이 단축 코드를 사용하면 작성자만 볼 수 있는 게시물에 메모를 만들 수 있습니다.

 function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );

결론

이 기사를 읽은 후 WordPress 단축 코드를 나만큼 사랑하고 자신의 블로그에서 이를 구현하기 시작하기를 바랍니다.