Nuxt 및 Netlify를 사용하여 헤드 없는 Wordpress 사용

섹션 1 - Wordpress 설정

Vue, Nuxt 및 약간의 순풍이 포함됩니다.
Netlify를 배포하고 CMS에 구축 연결을 추가하는 문제를 처리합니다.
최근 나의 임무는 AIGA의 첫 번째 연도Midwest Design Week를 위해 활동 사이트를 구축하는 것이다.
작년에 나는 게이츠비와 가격 인하 서류로 AIGA Louisville의 디자인 주간에 사이트를 만들었다.내용은 사실상 나나 다른 개발자만 편집할 수 있었는데, 이것은 당시에 매우 좋았다.(나는 이번 경험에 관한 문장을 몇 편 썼다.
그러나 올해는 4개 도시 지회의 구성원들이 참여해 쉽게 내용을 추가하고 편집할 수 있어야 하기 때문에 어떤 CMS가 필요하다.
내가 일하는 회사Relay Design Co.도 창의적인 스폰서로 참여했다.Relay에서 사용하는 스택에는 Vue JS와 Wordpress가 포함되어 있기 때문에 저는 Wordpress를 헤드 없는 CMS로 사용하고 Vue의 정적 사이트 생성기 Nuxt를 사용하여 전단을 구축하려고 합니다.

로컬 Wordpress

첫 번째 단계는 당연히 로컬에 Wordpress 사이트를 구축하는 것이다. 그러면 당신은 위에서 일할 수 있다.이 과정에 대해 나는 사용하는 것을 좋아한다local by flywheel.만약 네가 아직 해 보지 않았다면, 나는 네가 해 보라고 강력히 건의한다. 왜냐하면 전체 과정은 사실상 세 번의 클릭과 세 개의 텍스트 입력 필드이기 때문이다.
이 프레젠테이션에 대해, 나는 사이트 영역을 headless 에 분배할 것이며, 그것은 headless.local 에서 사용할 수 있을 것이다.사용하는 항목에 따라 달라집니다localhost:####.

제목 없음

Wordpress 사이트가 시작되고 실행되면 /wp-content/themes/ 로 이동하여 headlesstheme 라는 새 폴더를 만듭니다.
이 폴더에 다음 파일을 만듭니다.

기능php

<?php

if (!defined('ABSPATH')) {
    exit;
} // Exit if accessed directly

풍격css

/*
Theme Name: Headless Theme
Theme URI: https://github.com/username/reponame
Author: Your Name
Author URI: https://yoursite.com/
Description: headless theme for using WP as a REST API only
Version: 0.1.0
Requires at least: 4.7
Requires PHP: 5.6
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: headlesstheme
*/

지수php

<script type="text/javascript">
  window.location = 'https://yourfrontend.com';
</script>

이 Wordpress 사이트의 URL을 방문하려면 전방 응용 프로그램으로 다시 지정하지 마십시오. index.php 비워 주십시오.
테마를 합법적으로 보이기 위해 새 테마 폴더에 800x600 PNG 이미지 파일을 추가하고 screenshot.png 로 이름을 지정합니다.이 이미지는 주제 아래의 대시보드에 표시됩니다.
새 테마를 활성화할 준비가 되었습니다.

타사 플러그인

다음으로, 우리는 CMS로 Wordpress를 사용하는 것을 더욱 편리하게 하기 위해 플러그인을 설치해야 한다.

클래식 편집기

새로운 쿠템버그 블록 편집기를 비활성화합니다.

고급 사용자 정의 필드

나는 지금 이 플러그인이 어떻게 핵심 Wordpress에 속하지 않는지 모르겠지만, 이름 그대로 댓글과 페이지에 사용자 정의 필드를 추가하는 능력을 증가시켰다.없습니다. 기본 제목, 텍스트 내용 및 특징 이미지 필드만 사용할 수 있습니다.

SVG 지원

기본적으로 Wordpress 미디어 라이브러리에서는 SVG 이미지를 사용할 수 없습니다. XML을 기반으로 하기 때문에 보안 위험이 발생할 수 있습니다.편집권을 부여한 누구라도 믿을 만한 사람이라면 문제가 되지 않을 것이다.
플러그인을 사용하지 않으려면 다음 코드를 functions.php 파일에 추가하면 SVG 지원을 사용할 수 있습니다.

function allow_svg($mimes)
{
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'allow_svg');

function fix_mime_type_svg($data = null, $file = null, $filename = null, $mimes = null)
{
    $ext = isset($data['ext']) ? $data['ext'] : '';
    if (strlen($ext) < 1) {
        $exploded=explode('.', $filename);
        $ext=strtolower(end($exploded));
    }
    if ($ext==='svg') {
        $data['type']='image/svg+xml' ;
        $data['ext']='svg' ;
    } elseif ($ext==='svgz') {
        $data['type']='image/svg+xml' ;
        $data['ext']='svgz' ;
    }
    return $data;
}
add_filter('wp_check_filetype_and_ext', 'fix_mime_type_svg', 75, 4);

나는 보통 플러그인과 의존항을 최대한 피하지만, 이런 상황에서 이 부분을 사용하면 SVG를 앞부분에 잘 업로드하고 표시할 수 있지만, Wordpress 계기판에 정확하게 표시할 수 없기 때문에 시종일관 이 점을 하기 위해 더 많은 노력을 기울여야 한다는 것을 발견했다.따라서 SVG 지원 플러그인을 사용합니다.

JSON API

Wordpress는 두 가지 기본 내용 유형인 댓글과 페이지를 제공합니다.Wordpress JSON API는 이 두 가지 콘텐츠 유형에 쉽게 접근할 수 있는 단점을 제공합니다.http://headless.local/wp-json/wp/v2/posts화목하다http://headless.local/wp-json/wp/v2/pages추가?page=1&per_page=100&_embed=1는 사용 가능한 모든 데이터를 반환합니다.

API 플러그인 사용자 정의

다른 내용 유형을 만들 수도 있고, 유사한 단점을 사용하여 조회할 수도 있다.새 게시물 유형을 만드는 코드는 플러그인에 넣는 것이 좋습니다.
사용자 정의 플러그인을 만들려면 /wp-content/plugins/ 내에 새 폴더를 만들고 headless-plugin 또는 원하는 이름으로 이름을 지정합니다.
이 폴더에 폴더와 같은 이름의 php 파일을 만듭니다.

헤드 플러그인이 없습니다.php

<?php
/*
Plugin Name: Headless Plugin
Description: Custom setup for JSON API
Author: Your Name
Version: 0.1.0
Text Domain: headless-plugin
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

if (!defined('ABSPATH')) {
    exit;
} // Exit if accessed directly

// ADD CODE FOR CUSTOM POST TYPES HERE

다음 코드는 Events라는 post 유형을 만듭니다.

// create events post type
add_action('init', 'create_post_type_events');
function create_post_type_events()
{
    $labels = array(
    'name'               => _x('Events', 'post type general name', 'headless-plugin'),
    'singular_name'      => _x('Event', 'post type singular name', 'headless-plugin'),
    'menu_name'          => _x('Events', 'admin menu', 'headless-plugin'),
    'name_admin_bar'     => _x('Event', 'add new on admin bar', 'headless-plugin'),
    'add_new'            => _x('Add New', 'Event', 'headless-plugin'),
    'add_new_item'       => __('Add New Event', 'headless-plugin'),
    'new_item'           => __('New Event', 'headless-plugin'),
    'edit_item'          => __('Edit Event', 'headless-plugin'),
    'view_item'          => __('View Event', 'headless-plugin'),
    'all_items'          => __('All Events', 'headless-plugin'),
    'search_items'       => __('Search Events', 'headless-plugin'),
    'parent_item_colon'  => __('Parent Events:', 'headless-plugin'),
    'not_found'          => __('No Events found.', 'headless-plugin'),
    'not_found_in_trash' => __('No Events found in Trash.', 'headless-plugin')
  );

    $args = array(
    'labels'             => $labels,
    'description'        => __('Description.', 'headless-plugin'),
    'public'             => true,
    'publicly_queryable' => true,
    'show_ui'            => true,
    'show_in_menu'       => true,
    'query_var'          => true,
    'rewrite'            => array('slug' => 'event'),
    'capability_type'    => 'post',
    'has_archive'        => true,
    'hierarchical'       => false,
    'menu_position'      => 5,
    'show_in_rest'       => true,
    'rest_base'          => 'events',
    'rest_controller_class' => 'WP_REST_Posts_Controller',
    'supports'           => array('title', 'editor', 'custom-fields'),
  );

    register_post_type('events', $args);
}

이 파일의 맨 위에 있는 주석에 지정된 동일한 텍스트 필드를 사용해야 합니다.

현재, 우리는 이 단점http://headless.local/wp-json/wp/v2/events?page=1&per_page=100&_embed=1을 사용하여 사건을 조회할 수 있다
새 게시물 유형에 대한 사용자 정의 끝점을 만들 수도 있습니다.다음 코드는 http://headless.local/wp-json/mwdw/v1/events 에서 접근할 수 있는 이벤트 노드를 만들었습니다.

function events_endpoint($request_data)
{
    $args = array(
    'post_type' => 'events',
    'posts_per_page' => -1,
    'numberposts' => -1,
    'post_status' => 'publish',
  );
    $posts = get_posts($args);
    foreach ($posts as $key => $post) {
        $posts[$key]->acf = get_fields($post->ID);
    }
    return  $posts;
}
add_action('rest_api_init', function () {
    register_rest_route('mwdw/v1', '/events/', array(
    'methods' => 'GET',
    'callback' => 'events_endpoint'
  ));
});

개인적으로 나는 기본 단점만 사용하는 것을 더 좋아한다.

ACF 회사

고급 사용자 정의 필드를 사용하여 컨텐트를 추가하므로 API가 반환하는 데이터에 이 필드를 추가해야 합니다.우리는 함수를 작성하여 단점을 추가한 다음 rest_prepare_post_type 갈고리에서 모든post 형식에 이 함수를 호출할 수 있습니다.

// add ACF object to default posts endpoint
add_filter('rest_prepare_post', 'acf_to_rest_api', 10, 3);
// adds ACF object to events endpoint
add_filter('rest_prepare_events', 'acf_to_rest_api', 10, 3);
function acf_to_rest_api($response, $post, $request)
{
    if (!function_exists('get_fields')) {
        return $response;
    }

    if (isset($post)) {
        $acf = get_fields($post->id);
        $response->data['acf'] = $acf;
    }
    return $response;
}

이것은 거의 Wordpress를 만드는 원인이다.2부에서는 Vue/Nuxt에서 데이터를 조회하고 Netlify 설정을 사용하여 자동으로 배치합니다.
내 테마와 플러그인의 원본 코드를 보십시오.👀

relaydesignco회사 / mdmwrest 플러그인

relaydesignco회사 / wp 헤더 없는 테마

읽어주셔서 감사합니다!