Blog

워드프레스로 고객을 위한 웹사이트를 만드는 방법

이 글은 고객을 위한 사이트를 만들어 달라는 요청으로 탄생했습니다. 평소처럼 PHP 프레임워크와 몇 가지 패키지, 라이브러리 및 기타 유틸리티를 사용하여 사이트를 만들려고 했습니다. 이번에는 워드프레스로 하기로 결정했습니다.

그리고 저는 항상 이 블로그를 저 자신을 위한 기억 보조 도구로 사용해 왔기 때문에 전체 과정을 문서화할 것입니다.

글이 길어질 수 있으므로 다음 섹션으로 나누어 설명하겠습니다:

  • 요구 사항과 워드프레스가 필요한 이유는 무엇인가요?
  • 호스팅
  • 워드프레스에서 사용자 정의 필드 만들기
  • 페이지 만들기
  • 패널 메뉴 만들기
  • 고객에게 불필요한 정보 숨기기
  • 패널의 부가 가치
  • 테마/템플릿

시작하겠습니다…

요구 사항과 워드프레스가 필요한 이유는 무엇인가요?

웹 개발자로서 우리는 종종 개발 요청을 받는 사이트 유형이 많다는 것을 알고 있습니다:

  • 비즈니스 사이트: 제품 카탈로그, 회사 소개, 연락처 페이지 등이 포함된 회사의 일반적인 프레젠테이션입니다.
  • 상점: 주문하고 결제할 수 있는 곳
  • 관리: 더 복잡하고 일반인이 접근하기 어려운 경우가 많습니다.
  • 기타

이 글은 비즈니스 사이트에만 초점을 맞추고 있습니다. 워드프레스가 거의 모든 종류의 요구 사항에 맞게 조정할 수 있다는 것은 100% 확실하지만, 이 글에서는 제가 경험한 것에 대해서만 이야기하려고 합니다.

비즈니스 웹사이트는 만들기가 가장 쉬우며, 고객이 회사 소개, 업무, 연락처 등의 페이지에 대한 데이터를 입력할 수 있는 모듈이 있는 기본 패널만 있으면 됩니다. 그리고 이 데이터의 필드는 일반적으로 입력, 텍스트 영역(단순하고 풍부한), 이미지, 갤러리, 관계 등입니다.

일반적으로 이런 종류의 사이트는 Laravel과 같은 프레임워크를 사용하여 만들 수 있으며, 10월CMS, 아스가르드CMS, laraadmin 등과 같은 다양한 패키지가 있습니다.

‘추가’ 패키지의 도움 없이도 패널용 템플릿을 다운로드하고 나머지는 PHP 또는 라라벨로 프로그래밍하여 만들 수 있습니다.

워드프레스로 하기로 결정한 이유는 단순히 이런 식으로 하는 방법을 배우고 더 쉽고, 더 어렵고, 더 예쁘고, 더 아름답고, 더 관리하기 쉬운지 직접 확인하기 위해서였습니다.

누군가가 워드프레스를 사용한다는 소식을 듣고 사방으로 고개를 갸웃거리는 사람들이 많다는 것을 알고 있지만 이러한 유형의 웹 사이트의 경우 클라이언트에게 작동하는 한 어떻게 하든 상관없으며 복잡한 시스템이 아니라는 것을 이해해야 합니다. 다른 종류의 웹 사이트의 경우 워드프레스를 사용하기 전에 생각해 봐야 할 것입니다.

또 다른 장점은 테마와 템플릿을 쉽게 통합할 수 있다는 점입니다. 이에 대해서는 이 글의 마지막 항목에서 설명합니다.

호스팅

웹 사이트 제작에 다른 방법을 시도하는 것을 기회로 다른 호스팅을 사용하기로 했습니다. 이번에는 Hostinger를 사용하기로 결정했습니다.

고객도 스페인 사람이었기 때문에 스페인 호스팅입니다. 가장 저렴한 요금제인 2유로 요금제를 선택했고 현재 모든 것이 순조롭게 진행되고 있습니다. 이 클라이언트는 아직 방문 횟수가 많지 않지만 현재로서는 일일 고유 방문 100 회를 잘 지원합니다.

워드프레스에서 사용자 정의 필드 만들기

여기서부터 흥미로운 부분이 시작됩니다. 필드 만들기, 페이지 만들기, 메뉴 만들기 등의 흐름은 순서를 유지하기 위해 사용할 수 있는 임시적인 흐름일 뿐입니다.

PODS 플러그인을 설치합니다.

 

이 플러그인을 사용하면 기본적으로 글 유형 또는 분류를 만들 수 있습니다. 그리고 이러한 각 글 유형 내에서 사용자 정의 필드를 만들 것입니다. 이해를 돕기 위해 예를 들어보겠습니다:

  • 일반 게시물에는 제목과 설명이 있습니다.
  • 새 글 유형에는 제목, 주소, 전화, 이메일 필드를 사용할 수 있습니다.

이런 식으로요:

플러그인이 설치되고 활성화되면 수행하려는 작업에 따라 포스트 관리자 -> 새로 추가 또는 포스트 관리자 -> 파드 편집으로 이동합니다.

따라서 첫 번째 단계는 사이트에 필요한 만큼의 포드(글 유형 또는 분류)를 만드는 것입니다. 예를 들어 다음과 같은 것을 만들 수 있습니다:

  • 홈(게시물 유형)
  • 슬라이더 홈(포스트 유형)
  • 제품(포스트 유형)
  • 카테고리 제품(분류)
  • 회사(게시물 유형)
  • 브랜치(포스트 유형)
  • 연락처(게시물 유형)

설명해야 할 한 가지 중요한 점은 파드 간에 관계를 생성할 수 있다는 것이다. 예를 들어

  • 홈 페이지에는 일부 동적 텍스트와 일부 동적 이미지 + 이미지, 제목, 부제목, 링크와 같은 자체 콘텐츠가 있는 슬라이더가 있습니다.
  • 제품은 분류되지만 슬라이더의 경우처럼 복잡한 포드에 의해 분류될 필요는 없으며, 단순히 단어나 구문으로 구성된 카테고리일 뿐입니다.

첫 번째 경우, “홈” 파드에 관계 유형의 필드를 추가합니다.

두 번째 유형은 생성된 분류체계에서 직접 수행합니다.

페이지 만들기

모두 파드로만 구성되지는 않을 것입니다. 일부 페이지도 사용할 것입니다. 예를 들어, 홈페이지용 페이지와 연락처용 페이지를 만들어 보겠습니다.

이 부분에서는 약간의 상상력을 발휘해야 합니다. 사이트의 모든 섹션이 페이지가 되는 것은 아니며 일부는 파드가 될 것입니다. 여기에는 이미 모든 포스트 유형과 마찬가지로 각각의 퍼머링크가 있으며 분류 체계도 마찬가지입니다.

페이지를 만드는 목적은 페이지 템플릿 옵션을 설정하고 이미 파드에 있는 모든 디자인을 사용할 수 있도록 하기 위함입니다.

메뉴 만들기

모든 파드와 페이지를 생성한 후. 메뉴 준비를 시작해야 합니다. 전체 사이드 메뉴를 보면 모든 것이 엉망진창입니다.

글 유형 “홈”에 대한 메뉴가 자동으로 생성되었습니다. 그리고 두 가지 항목이 있는 메뉴를 제공합니다: 모두 보기와 추가. 하지만 고객에게 무한한 홈을 만들 수는 없으므로 이러한 메뉴를 제공할 필요가 없습니다. 고객에게 홈은 하나뿐입니다.

여기서 앞서 만든 홈 페이지가 등장합니다. 해당 페이지의 편집 링크를 가져와서 클릭하면 해당 페이지의 편집 보기가 바로 열리는 사용자 지정 메뉴를 만들겠습니다.

이 모든 작업을 위해 관리자 메뉴 편집기 플러그인을 사용할 것입니다:

사용하기 매우 쉽고 아이콘과 하위 메뉴를 선택할 수 있습니다. 나는 당신이 그것을 사용하는 방법을 알게 될 것이라고 확신합니다. 그러나 여기에 중요한 설명이 있습니다!

메뉴 항목을 숨기는 데 이 플러그인을 사용하지 않는 것이 좋습니다

지금은 모든 것이 매우 추악하고 메뉴 지옥처럼 보인다는 것을 알고 있습니다. 하지만 조금만 기다려주세요.

고객에게 불필요한 정보 숨기기

가장 먼저 해야 할 일은 클라이언트에 대한 사용자를 만드는 것입니다. 편집자 권한으로 만드는 것이 좋습니다.

이제 Adminimize 플러그인을 설치합니다.

이 플러그인의 구성 페이지로 이동하면 수많은 체크박스가 표시됩니다. 이러한 각 체크박스는 말 그대로 클라이언트의 보기에서 무언가를 숨기고 사라지게 합니다. 편집자 권한으로 만들었으므로 해당 열 하나만 걱정하면 됩니다.

섹션별로 나뉘어져 있고 몇 단계 전에 만든 각 파드에 대한 섹션도 있음을 알 수 있습니다. 하지만 가장 먼저 숨기고 싶은 것은 글, 페이지, 미디어, 링크, 댓글 및 페이지에서만 액세스할 수 있는 모든 파드와 같이 클라이언트에게 표시하지 않을 모든 메뉴 항목입니다. 얼마 전의 홈 페이지의 예와 같습니다.

그런 다음 각 파드의 섹션으로 이동하여 클라이언트에 필요하지 않은 항목도 숨깁니다. 필요하지 않은 것들과 혼동하지 않도록 하기 위해서입니다. 필요하지 않은 경우 ‘새로 추가’, ‘화면 옵션’, ‘작업 게시’, ‘영구 링크’를 숨기는 것이 좋습니다.

이제 이 플러그인을 계속 사용하면서 클라이언트에 필요하지 않은 푸터와 헤더를 숨길 수 있습니다.

워드프레스 패널에 추가되는 가치

마지막으로 클라이언트 패널을 마무리하기 위해 몇 가지 플러그인을 더 추천해드리겠습니다.

사용자 지정 대시보드 위젯

이것은 사용하기 매우 쉽고 쓸모없는 워드프레스를 대체할 대시보드나 데스크톱을 만들 수 있습니다. 다음과 같이 보일 것입니다:

워드프레스 디자인을 대체하고 ‘산만하게’ 만드는 템플릿. 취향의 문제이긴 하지만 저는“멋진 관리자 UI”와 “슬레이트 관리자 테마”가 마음에 들었습니다.

마지막으로 로그인 페이지를 개선하는 것입니다. 로고를 간단히 변경할 수 있는 WP 사용자 정의 로그인 페이지 로고 플러그인처럼 간단한 것일 수 있습니다.

테마 또는 템플릿

이제 패널이 완성되었습니다. 이 모든 것을 관리자에 통합해야 하는데, 이 부분이 매우 흥미롭습니다.

워드프레스 테마 및 워드프레스 이외의 템플릿을 모두 사용할 수 있습니다. 이런 종류의 작업은 워드프레스 테마를 사용하지 않고 디자이너에게 사용자 지정 레이아웃을 보내는 사용자 지정 작업인 경우가 많기 때문에 이상적입니다.

가장 먼저 할 일은 각 템플릿 파일을 가져와서 워드프레스용 페이지 템플릿으로 변환하는 것입니다.

예를 들어 이전 포인트의 홈의 경우입니다. 파일 시작 부분에 이 작은 코드를 추가하는 것입니다.

?
1
2
3
4
5
<?php
/*
Template Name: Home Pod Page
*/
?>

그리고 파드, 페이지, 분류법 등에 연결된 모든 파일에 대해서도 마찬가지입니다.

그런 다음, 파드의 데이터에 액세스하는 방법에는 두 가지가 있습니다. 실제로는 하나입니다. 다음과 같습니다:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
<?php
$slider = new Pod('slider_home');
$slider->findRecords('name ASC');
?>
<?php while ( $slider->fetchRecord() ) : ?>
<li>
<h4><?php echo $slider->get_field('volanta') ?></h4>
<h1><?php echo $slider->get_field('titulo') ?></h1>
<img src="<?php echo $slider->get_field('imagen')[0]['guid']?>">
</li>
<?php endwhile ?>

즉, 여러 개의 파드를 생성할 수 있는 파드에 액세스하는 것입니다. 하지만 만약 그것이 하나뿐이라면. 예를 들어 연락처 데이터는 동일하지만 fetchRecord는 동안 없이 수행됩니다.

또한 직접 만들지는 않았지만 워드프레스의 자연스러운 일부인 ‘제목’ 및 ‘퍼머링크’와 같은 다른 파드 값에 액세스할 수도 있습니다.

그리고 마지막 도움말 코드는 모두 functions.php에 있습니다:

글 유형에 따라 페이지 템플릿을 할당합니다:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function get_current_post_type()
{
global $post, $typenow, $current_screen;
//we have a post so we can just get the post type from that
if ( $post && $post->post_type ) {
return $post->post_type;
}
//check the global $typenow - set in admin.php
elseif ( $typenow ) {
return $typenow;
}
//check the global $current_screen object - set in sceen.php
elseif ( $current_screen && $current_screen->post_type ) {
return $current_screen->post_type;
}
//check the post_type querystring
elseif ( isset( $_REQUEST['post_type'] ) ) {
return sanitize_key( $_REQUEST['post_type'] );
}
//lastly check if post ID is in query string
elseif ( isset( $_REQUEST['post'] ) ) {
return get_post_type( $_REQUEST['post'] );
}
//we do not know the post type!
return null;
}
add_filter( 'single_template', 'custom_page_template' );
function custom_page_template( $page_template )
{
// seteo por tipo de post
switch (get_current_post_type())
{
default:
return get_stylesheet_directory() . '/index.php';
break;
case 'calidad':
return get_stylesheet_directory() . '/sections/calidad.php';
break;
case 'producto':
return get_stylesheet_directory() . '/sections/detalle-productos.php';
break;
} // end switch
}

분류를 기반으로 페이지 템플릿을 할당하려면 다음과 같이 하세요.

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
add_filter( 'taxonomy_template', 'custom_taxonomy_template' );
function custom_taxonomy_template( $taxonomy_template )
{
$taxonomy = get_query_var('taxonomy');
switch ($taxonomy)
{
case 'linea':
return get_stylesheet_directory() . '/sections/productos.php';
break;
default:
return get_stylesheet_directory() . '/index.php';
break;
}
}

그리고 그들이 속한 섹션을 가져옵니다. 이 기능은 웹 메뉴에 클래스를 활성화하는 데 유용합니다.

?
1
2
3
4
5
6
7
function getSection() {
$page = explode('/', substr($_SERVER['REQUEST_URI'], 1));
$section = $page[2];
return $section;
}

그게 다입니다. 지금은 여기까지입니다. 댓글을 통해 추천, 비판, 조언을 해주시거나 질문을 해주시기 바랍니다.

답글 남기기