웹사이트 검색

최고의 WordPress 치트시트

WordPress는 아직은 아니더라도 빠르게 유명해지고 있습니다. 이 온화한 아름다움은 어디에나 있으며, 세계 최고의 웹사이트와 웹 앱을 구동하고 있습니다. 믿을 수 없을 만큼 다재다능할 뿐만 아니라 놀라울 정도로 배우고 사용하기 쉬운 최고의 CMS 및 블로깅 플랫폼입니다. WordPress가 날이 갈수록 인기가 높아지는 이유는 무엇일까요?

하지만 WordPress를 설정하고 실행할 때 표면적으로 보이는 것은 뒤에서 일어나는 일의 극히 일부일 뿐입니다. 사실, 우리 모두가 그토록 좋아하는 아름다운 UI는 무대 뒤에서 소란스러운 활동에 비하면 아무것도 아닙니다. 즉, WordPress는 PHP와 MySQL이라는 다소 복잡한 두 가지 웹 기술을 기반으로 실행됩니다.

역할을 하는 다른 기술로는 JavaScript가 있으며 이는 jQuery, CSS 및 HTML과 가까운 사촌입니다. WordPress 테마(플러그인 포함)는 주로 PHP로 작성되며 MySQL 데이터베이스를 사용하여 실행됩니다. 또한 앞서 언급한 웹 기술에 의존합니다. 이러한 모든 기술은 함께 작동해야 합니다.

이제 초보자로서 WordPress 플랫폼, 테마 및 플러그인이 조화롭게 작동하기 위해 개발자가 표준화된 코드 세트(통칭하여 PHP 태그라고도 함)를 사용한다는 사실을 이해하지 못할 수도 있습니다. 오늘 게시물에서 간략하게 설명하는 코드는 이러한 코드가 얼마나 유용한지 보여줍니다. 우리는 좋은 측정을 위해 여기 어딘가에 몇 가지 예를 집어넣을 것이므로 테마 구축 여정을 신나게 즐길 준비를 하십시오!

테마해부

WordPress 테마는 단순히 서로 연결된 여러 개의 PHP 파일에 지나지 않습니다. 테마(및 사이트)의 모양을 담당하는 CSS 스타일시트 파일과 함께 제공됩니다. 기본으로 돌아가서 WordPress 테마는 단지 몇 개의 PHP 파일에 불과합니다. 위는 WordPress 테마의 구조에 대한 훌륭한 tuts+ 치트 시트의 스냅샷입니다. WordPress 테마를 만들려면 다음 파일이 필요합니다.

  • header.php – 이 템플릿 파일에는 <head> 섹션 내 및 여는 <body> 태그 앞에 나타나는 헤더 정보가 포함되어 있습니다. 여기에는 메타데이터, 사이트 제목, CSS 스타일시트 링크 등을 추가할 수 있습니다.
  • index.php  – WordPress 테마(또는 사이트)의 본문 템플릿입니다. 유일한 목적은 템플릿 태그를 사용하여 다른 파일을 포함하여 다른 파일을 함께 묶는 것입니다(템플릿 태그에 대한 자세한 내용은 잠시 후).
  • sidebar.php  – 사이드바 섹션입니다. 위젯, 카테고리, 추가 메뉴, 검색 양식 및 기타 원하는 것을 배치할 수 있습니다.
  • footer.php  – 바닥글 섹션입니다. 저작권 정보, RSS 링크, 위젯, 링크, 소셜 아이콘 등을 추가하세요.
  • page.php  – WordPress 기반 사이트에서 페이지를 만들 때마다 이 템플릿이 담당합니다.
  • single.php  – 이 템플릿 파일에는 단일 블로그 게시물이 포함됩니다.
  • comments.php  – 댓글을 담당하는 템플릿
  • 404.php  – 독자가 악명 높은 404 찾을 수 없음 오류를 접했을 때 표시되는 템플릿
  • search.php –  독자가 WordPress 사이트에서 콘텐츠를 찾을 수 있는 기회를 제공합니다.
  • searchform.php – 위에 언급된 기능을 제공하려면 검색 양식이 필요합니다. 그렇지 않습니까?
  • archive.php – 2008년에 게시한 콘텐츠를 찾는 것이 번거롭지 않기 때문입니다.
  • functions.php – 모든 특수 기능은 물론 맞춤 플러그인까지 여기에 배치합니다. 그러나 테마 간 호환성을 위해서는 사용자 정의 코드를 독립 실행형 플러그인으로 추가하는 것이 좋습니다. 추가 메뉴를 추가하고 위젯을 활성화하는 등 다양한 작업을 수행할 수 있습니다. 이 파일은 WordPress 사이트/테마를 원하는 대로 바꿀 수 있는 많은 기능을 제공합니다.
  • style.css – 이 파일은 PHP 템플릿 파일이 아닙니다. 하지만 미적 요소를 제어하기 위해 CSS 스타일을 추가하는 파일입니다. WordPress 테마에 대한 정보 헤더도 함께 제공됩니다.

의심할 여지 없이 더 적은 수의 템플릿으로 테마를 구축할 수 있지만 이를 습관화하는 것은 권장하지 않습니다. 결국 표준 WP 테마를 만들려면 위의 10개 정도의 파일만 있으면 됩니다. 13은 큰 숫자가 아니죠, 그렇죠? 간단히 말해서 index.php는 다음과 같습니다.

<?php
// Every page will need the contents of the header.php
get_header(); ?>

// Insert main content here, include the loop

<?php
// Include your sidebar
get_sidebar(); ?>

<?php
// The footer hook is used by themes and plugins to load scripts and tracking codes
get_footer(); ?>

계속해서 루프라는 멋진 코드 스니펫에 대해 이야기해 보겠습니다.

루프

인기 있는 WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법과 같은 이전 게시물 시리즈 중 일부에서 루프에 대해 언급했습니다. 그렇다면 루프가 인기 있는 조각이 되는 이유는 무엇일까요? 이 특별한 코드가 없으면 각 게시물과 발췌문을 WordPress 테마에 직접 코딩해야 합니다. 새 기사를 게시할 때마다 이 작업을 수행합니다.

당신이 낭비한 노력과 시간은 당신을 우울하고 경직되게 만들 것입니다. 당신이 죽을 때까지 애쓰고 나서 남기게 될 탄소 흔적은 오존층에 양키 경기장 12개 크기의 구멍을 뚫을 것입니다. 사실(또는 그 사실이 부족함)을 과도하게 확대하고 있지만 WordPress 사이트의 모든 게시물을 수동으로 코딩했다면 정말 당황했을 것입니다.

루프는 생명의 은인입니다. WordPress 템플릿 파일의 어느 위치에나 다음 코드 조각을 삽입하면 지금까지 작성한 모든 게시물이 나열됩니다.

<?php
if ( have_posts() ) :

	while ( have_posts() ) :

		the_post();

		// Post Content here

	endwhile;

endif; ?>

일반적으로 게시물 목록을 표시하기 위해 index.php의 루프를 사용하지만 자유롭게 실험해 보세요. 게시물을 나열하고 싶은 곳에 추가하세요. 또한 루프 내에 사용자 정의 HTML 및 PHP 태그를 추가하여 적합하다고 생각되는 대로 게시물을 사용자 정의하세요. 태그 얘기가 나와서 말인데, WordPress에서는 무엇을 사용할 수 있나요?

태그 포함

템플릿 포함 태그는 WordPress 테마 폴더의 다른 템플릿 파일을 포함(또는 호출)하기 위해 템플릿 파일에 사용하는 단순한 PHP 코드입니다. 우리가 말하는 내용은 다음과 같습니다.

  • <?php get_header(); ?> – index.php에서 이것을 사용하여 header.php 파일을 호출(또는 포함)합니다. header.php를 가져와 index.php에 내용을 표시합니다. 이것이 바로 파일을 포함하는 것입니다.
  • <?php get_sidebar(); ?> – sidebar.php를 포함합니다.
  • <?php get_footer(); ?> – footer.php 템플릿 파일을 포함합니다.
  • <?php comments_template(); ?> – 빠른 퀴즈: 이 포함 태그의 역할이 무엇이라고 생각하시나요?

템플릿 블로그인포 태그

간단히 bloginfo 태그라고 부르는 또 다른 템플릿 태그 카테고리가 있습니다. 데이터베이스에서 WordPress 사이트에 대한 정보를 가져오는 역할을 합니다. 이는 주로 사용자 프로필 및 설정 -> 일반을 통해 관리 영역에서 WordPress 사이트에 제공하는 정보입니다. 데이터베이스에서 정보가 검색되면 해당 태그는 사이트에 추가한 것과 동일하게 표시됩니다.

bloginfo의 구조를 약간 수정하여 검색된 정보를 표시하는 대신 PHP 코드의 다른 곳에서 해당 정보를 사용할 수 있습니다. 얼마나 편리한 지? 이에 대해서는 잠시 후에 자세히 알아보겠습니다. 가장 일반적인 bloginfo 태그는 다음과 같습니다.

  • <?php bloginfo('이름'); ?> – WordPress 블로그/사이트의 제목이 표시됩니다.
  • <?php bloginfo('url'); ?> – 이 템플릿 태그는 블로그의 URL을 표시합니다.
  • <?php bloginfo('설명'); ?>  – 블로그에 대한 설명 또는 태그라인이 표시됩니다.
  • <?php bloginfo('문자 집합'); ?>  – 사이트를 인코딩하는 데 사용되는 문자 집합을 표시합니다. 기본값은 UTF-8입니다.
  • <?php bloginfo('stylesheet_url'); ?>  – 활성 테마의 CSS 스타일시트에 대한 URL을 표시합니다.
  • <?php bloginfo('버전'); ?>  – 사용 중인 WordPress 버전을 표시합니다.
  • <?php bloginfo('언어'); ?>  – WordPress의 언어를 표시합니다.
  • <?php bloginfo('rss_url'); ?>  – RSS 0.92 피드의 URL을 표시합니다.
  • <?php bloginfo('rss2_url'); ?> – RSS 2.0 피드의 URL을 표시합니다.

WordPress 테마를 향상하는 데 사용할 수 있는 몇 가지 다른 bloginfo 태그가 있습니다. 이제 우리가 몇 초 전에 이야기했던 작은 bloginfo 수정에 대해 말씀드리겠습니다. 지금까지 우리는 <?php bloginfo(); ?>. 이를 다음과 같이 수정해 보겠습니다. <?php $bloginfo=get_bloginfo ($show, $filter); ?>. 매개변수를 분석하겠습니다.

  • $show  – 데이터베이스에서 검색하려는 정보의 이름을 지정하는 데 사용하는 키워드입니다. 예에는 '이름', 'URL', '설명', '관리자_이메일' 등이 포함됩니다.
  • $filter – 검색된 정보를 필터링할 수 있습니다. 기본적으로 'raw'로 설정되어 있는데, 이는 $show의 값이 있는 그대로 반환된다는 의미입니다. 이것을 'display'로 설정하면 $show 값이 wptexturize() 함수를 통해 먼저 전달됩니다. 하지만 지금은 이것에 대해 걱정하지 마십시오.

예를 들면 다음과 같습니다. '최고의 프리미엄 WordPress 테마'와 같은 태그라인(사이트 설명)을 가져와 표시한다고 가정해 보겠습니다. 먼저 이 태그를 사용하여 이 정보를 검색합니다.

<?php $site_description = get_bloginfo( 'description' ); ?>

...사이트 설명을 $site_description에 로드합니다. 사이트에 사이트 설명을 표시하려면 다음을 사용하세요.

<?php echo 'Your tagline is: '. esc_html( $site_description ); ?>

이를 통해 다음을 얻을 수 있습니다. 귀하의 태그라인: 최고의 프리미엄 WordPress 테마

참고: WordPress 사이트에서 훨씬 더 많은 것을 얻을 수 있게 해주는 다양한 유형의 템플릿 태그가 있습니다. 일반 태그, 작성자 태그, 게시물 썸네일 태그, 카테고리 태그, 링크 태그 등 다양한 세트로 분류됩니다. 루프 내부에서도 사용할 수 있으므로 재미있을 것입니다.

테마 스타일시트

앞서 style.css를 언급했습니다. 또, style.css 파일이 왜 중요한가요? 첫째, 테마에 대한 세부 정보를 제공합니다. 이 정보는 스타일시트 헤더에 들어가 관리 영역에서 선택하는 동안 테마를 식별하는 데 도움이 됩니다. 따라서 두 테마의 스타일시트 헤더에 동일한 세부정보가 있어서는 안 됩니다. 다음은 스타일시트 헤더의 예입니다.

/*
Theme Name: Your Theme Name
Theme URI: https://www.yoursite.com/yourtheme
Author: Your Name
Author URI: https://www.yoursite.com/
Description: This WordPress theme is 100% responsive blah blah...
Version: 1.0
License: GNU General Public License V2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gold, one-column, left-sidebar, responsive-grid, etc
Text Domain: yourthemename
*/

이 정보는 style.css의 첫 번째(또는 맨 위에) 표시됩니다. 그 외에 다음 사항을 확인하세요.

  • CSS 코딩 표준을 따르세요.
  • 유효한 CSS를 사용하세요
  • CSS 최소화
  • 인쇄에 적합한 스타일 추가
  • 모든 HTML 요소의 스타일 지정

마지막 생각들

이 치트 시트는 WordPress 테마 개발을 배울 때 시작하는 데 도움이 되는 빠른 리소스입니다. 여기에서 공유한 태그와 스니펫을 사용하면 표준 테마를 신속하게 개발하고 땀을 흘리지 않고도 향상시킬 수 있습니다. 물론, WordPress 테마 개발을 계속 배워야 하며, 이를 위해서는 다른 평판이 좋은 리소스 중에서 WordPress Codex, tuts+, Threehouse 및 ThemeShaper를 권장합니다.

그 외에도 팁, 치트, 스니펫, 기타 염두에 두고 있는 내용을 아래 댓글에 자유롭게 공유해 주세요. 우리는 귀하가 WordPress에 대해 어디서, 어떻게 배우는지 알고 싶습니다. 주위에 당신을보고!