Как построить кожу для вашего веб-приложения с реагировать и WordPress

Таким образом, вы обучили себя в качестве веб-инженера, и теперь хотите построить пылающий быстрый интернет-магазин для ваших клиентов. Список продуктов должен появиться в одно мгновение, и поиск должен тратить не более чем на долю секунды либо. Это вещи мечты?

Только не это. Ну, по крайней мере, это ничего, что не может быть достигнуто с сочетанием WordPress’ REST API и React, современная библиотека JavaScript.

Подожди, что? WordPress REST API?

Да, WordPress REST API поможет вам построить задний конец фундамент для вашего веб-приложения. Это хороший выбор для технологии бэк-энда вашего веб-приложения, если вы строите решение, управляемое контентом. WordPress будет бесперебойно работать с другими технологиями, а также; Вы можете использовать Node.js в качестве фокуса вашего приложения для подключения к другим службам RESTful.

WordPress REST API является игра-чейнджер для WordPress, который теперь можно смело называть веб-приложений – не только CMS. Теперь, когда передний и задний конец полностью отделены, WordPress может быть использован в качестве мобильного приложения бэк-эндили или в качестве бэк-энда для любой системы упором на содержание.

Но почему WordPress? Причина: Вы будете поражены функциональными возможностями, которые возникают из коробки с WordPress. Вы получите обширное управление пользователями, управление средствами массовой информации и невероятно удобный для разработчиков набор AA для расширения вашей работы.

В этой статье я проведу вас через создание SPA (Одностраничное приложение) WordPress тему с помощью библиотеки JavaScript называется React, подключение к WP REST API.

Давайте перейти в строительство темы

Эта статья предполагает, что вы уже знакомы с различными существующими WordPress AIS, в частности те, которые управляют развитием тем для эстетики вашего сайта, и функциональности для плагинов вашего сайта. Я также предполагаю, что вы создали платформу разработки для WordPress, такие как стек LAMP в среде Linux или MacOS.

Для простоты, однако, я буду ссылаться только на абсолютные пути, как видимые с платформой XAMPP, которая используется с Windows.

Теперь, давайте создадим экземпляр WordPress в нашем localhost, назвав его “Небесный”. Это название темы WordPress мы собираемся использовать, чтобы помочь нам установить направление для создания будущих тем, готовых к использованию с веб-приложений питание от WordPress REST API. Возможно, вы уже знакомы с очень любимой иерархией шаблонов WordPress, но с REST API у вас есть возможность открыть для себя что-то другое!

Затем нам нужно создать папку для темы в wp-contentthemes папке. Перейдите к C:xampphtdocscelestialwp-contentthemes (или эквиваленту) и создайте celestial папку. Добавьте эти файлы в celestial папку темы:

  1. index.php
    Универсальный файл для темы.
  2. style.css
    Это содержит информацию о теме (а не фактической CSS).
  3. functions.php
    Написать функциональность и импорт файлов CSS и JS.

Добавьте файл изображения с именем, screenshot.jpg если требуется изображение для вашей темы, отображаемый внутри приборной панели.

Примечание: Код для каждого файла состоит из нескольких строк длиной и может быть найден на GitHub.

Далее, войдите в свой WordPress Dashboard, над головой к внешний вид и темы и выберите “Небесный” в качестве темы. Теперь, когда фонд на месте, давайте на создание темы.

WordPress theme selector
Вы можете выбрать тему «Небесная», созданную вами из панели Тем на панели мониторинга.

Начало работы с реагировать и Webpack для темы

React — это очень популярная библиотека uI, поддерживаемая и поддерживаемая Facebook. Согласно результатам опроса разработчиков Stack Overflow 2017, «React является самым любимым среди разработчиков».

ReactJS
React: Библиотека JavaScript для создания пользовательских интерфейсов.

Для запуска проекта необходимо инициализировать проект как проект NPM (менеджер пакетов узлов). Это делается с командой npm init в терминале (после установки Node.js и NPM на вашем компьютере). Инициализация проекта подскажет вам определенную информацию о конфигурации. После успешной инициализации NPM создаст файл package.json в корневом каталоге темы. Этот файл будет содержать сведения о проекте и все зависимости проекта.

React теперь находится под лицензией MIT, поэтому мы будем использовать версию 16 React в качестве библиотеки JavaScript для этого проекта. React имеет некоторые интересные функции под капотом, такие как виртуальный DOM (представление документа в памяти) и имеет множество инструментов, окружающих его, таких как маршрутизатор react. React также используется в проекте WordPress ‘ Calypso – приборной панели для WordPress.com.

Теперь мы установим необходимые пакеты NPM для проекта:

  1. Введите npm install --save react react-dom терминал и нажмите введите для установки пакетов.
    Использование Installing React via CLI
    npm для установки реагировать и реагировать-дом.

    Поскольку мы строим тему как одностраничное приложение (SPA), нам нужна помощь такого инструмента, как Webpack. Мы будем писать код как различные компоненты, и Webpack поможет нам упаковать их все вместе и вывести их в виде единого файла .js или .css. Короче говоря, это модуль расслоение.

    Webpack сначала будет установлен глобально на вашем компьютере. Для этого мы снова можем использовать NPM.

  2. Введите npm install -g webpack команду, чтобы получить последнюю стабильную версию Webpack, установленную глобально в вашей системе.

    Далее мы установим пакеты NPM, поддерживающие Webpack, в нашем приложении.

  3. Перейти к package.json файл в моем git репо и скопировать остальные зависимости оттуда в ваш раздел зависимых package.json’s. Затем npm install снова запустите, чтобы установить все пакеты в рамках package.json.
    {
     "name": "celestial",
     "version": "1.0.0",
     "description": "A basic theme using the WordPress REST API and React",
     "main": "index.js",
     "dependencies": {
       "babel-core": "^6.26.0",
       "babel-loader": "^7.1.2",
       "babel-preset-es2015": "^6.24.1",
       "babel-preset-react": "^6.24.1",
       "css-loader": "^0.28.7",
       "extract-text-webpack-plugin": "^3.0.1",
       "file-loader": "^1.1.5",
       "image-webpack-loader": "^3.4.2",
       "node-sass": "^4.5.3",
       "path": "^0.12.7",
       "react": "^16.0.0",
       "react-dom": "^16.0.0",
       "react-router-dom": "^4.2.2",
       "sass-loader": "^6.0.6",
       "style-loader": "^0.19.0",
       "url-loader": "^0.6.2",
       "webpack": "^3.6.0"
     },
     "devDependencies": {},
     "scripts": {
       "build": "webpack",   
       "watch": "webpack --watch"
     },
     "keywords": [
       "blog",
       "decoupled",
       "react",
       "rest-api"
     ],
     "author": "Muhammad Muhsin",
     "license": "GPL-3.0"
    }
    

    Выше приведен список всех необходимых пакетов в файле package.json для этого проекта.

  4. Копируйте конфигурации с GitHub и вставьте их в файл webpack.config.js вашей темы.
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var path = require('path');
    
    module.exports = {
       entry: {
           app: './src/index.jsx'
       },
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: '[name].js'
       },
       module: {
           rules: [
               {
                   test: /.scss$/,
                   use: ExtractTextPlugin.extract({
                       fallback: 'style-loader',
                       use: ['css-loader','sass-loader'],
                       publicPath: 'dist'
                   })
               },
               {
                   test: /.jsx?$/,
                   exclude: /node_modules/,
                   use: 'babel-loader'
               },
               {
                   test: /.(jpe?g|png|gif|svg)$/i,
                   use: [
                       'file-loader?name=[name].[ext]&outputPath=images/&publicPath=http://localhost/celestial/wp-content/themes/celestial/dist/images',
                       'image-webpack-loader'
                   ]
               },
               { test:
                   /.(woff2?|svg)$/,
                   loader: 'url-loader?limit=10000&name=fonts/[name].[ext]'
               },
               {
                   test: /.(ttf|eot)$/,
                   loader: 'file-loader?name=fonts/[name].[ext]'
               }
           ]
       },
       resolve: {
           extensions: ['.js', '.jsx']
       },
       plugins: [
           new ExtractTextPlugin({
               filename: "style.css",
               allChunks: true
           })
       ]
    }
    

    Важно:Пожалуйста, обратите внимание, что module.exports module я может rules[3] use publicPath изменяться в зависимости от того, где ваши изображения dist вашего проекта расположены в localhost. Если это неправильно, изображения могут не отображаться правильно в веб-приложении.

  5. После этого эти команды могут быть использованы для компиляции проекта:
    • webpackили npm run build для компиляции проекта, или
    • webpack --watchили npm run watch для компиляции проекта и просмотра изменений.

Примечание: Чтобы получить лучшее понимание Webpack, прочитайте эту статью Джозефа Циммермана на Smashing Magazine.

Расширение API WordPress REST

WordPress REST API поставляется с множеством различных конечных точек для извлечения сообщений, страниц, средств массовой информации и так далее. Тем не менее, они не всегда могут иметь все детали в своем ответе. Например, метод публикаций не дает URL-адрес изображения или имени автора. Поэтому мы должны делать отдельные вызовы для каждого из этих элементов.

Wordpress REST API
Доступ к данным сайта WordPress с помощью простого в использовании HTTP REST API.

Но что делать, если вы хотите, чтобы ваши собственные данные появляются в сообщениях ответ? Вот где магия расширения REST API приходит дюйма Следующий код добавит две дополнительные переменные в ответ на запрос сообщений, а именно author_name и featured_image_src . Код находится в файле functions.php:

// Add various fields to the JSON output
function celestial_register_fields() {
    // Add Author Name
    register_rest_field( 'post',
        'author_name',
        array(
            'get_callback'      => 'celestial_get_author_name',
            'update_callback'   => null,
            'schema'            => null
        )
    );
    // Add Featured Image
    register_rest_field( 'post',
        'featured_image_src',
        array(
            'get_callback'      => 'celestial_get_image_src',
            'update_callback'   => null,
            'schema'            => null
        )
   );
   // Add Published Date
    register_rest_field( 'post',
       'published_date',
       array(
           'get_callback'      => 'celestial_published_date',
           'update_callback'   => null,
           'schema'            => null
       )
    );
}
add_action( 'rest_api_init', 'celestial_register_fields' );

function celestial_get_author_name( $object, $field_name, $request ) {
    return get_the_author_meta( 'display_name' );
}
function celestial_get_image_src( $object, $field_name, $request ) {
   if($object[ 'featured_media' ] == 0) {
       return $object[ 'featured_media' ];
   }
    $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true );
   return $feat_img_array[0];
}
function celestial_published_date( $object, $field_name, $request ) {
    return get_the_time('F j, Y');
}

Расширение REST API дополнительными переменными в файле functions.php.

Глобальная переменная JavaScript

Есть определенные константы WordPress (или известный как “переменные”), которые мы будем использовать во всем приложении React. Это будет информация о различных маршрутах приложения (а затем быть WooCommerce конкретных них).

Эта переменная определена в файле functions.php. Он будет называться “CelestialSettings” и быть приложен к celestial-scripts , ручка для enqueued app.js файл:

wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true );

    $url = trailingslashit( home_url() );
    $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) );

    wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array(
        'title' => get_bloginfo( 'name', 'display' ),
        'path' => $path,
        'URL' => array(
            'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ),
            'root' => esc_url_raw( $url ),
        ),
        'woo' => array(
            'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ),
            'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9',
            'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03'
        ),
    ) ) ) );

Передача переменных WordPress (PHP) на передний конец.Вышеприведенный код показывает пример получения WordPress (PHP) переменных на переднем конце, важный и очень полезный метод при создании разъединение темы. Эта переменная объекта содержит название сайта, путь, URL для API и root и три переменные, относящиеся к WooCommerce (объясняется позже).

Реагировать и JSX

React отличается от остальных основных библиотек JavaScript. Я имею в виду, что мы обычно пишем JavaScript в нашем HTML. Однако, когда дело доходит до React, мы пишем HTML внутри нашего кода JavaScript. Чтобы быть более точным, мы пишем JSX внутри JS. JSX очень похож на HTML, но имеет несколько отличий. classАтрибут написан className как, например. Затем он преобразуется в простой JavaScript через Webpack и Babel и сохраняется в рамках app.js.

Есть, однако, несколько ограничений с написанием JSX. Например, в нашем методе может быть только один render() ребенок, который будет служить корневым элементом компонента. Однако преимущество в том, что отладить легче. Мы можем точно знать, где мы сделали ошибку, в то время как в обычном HTML наша ошибка, как правило, не будет отображаться явно. Мы будем писать JSX для этого проекта, и, следовательно, JavaScript файлы будут иметь расширение .jsx . Тем не менее, это также может быть, .js если вы предпочитаете так.

Создайте следующие файлы в src папке:

  1. index.jsx(основной файл и тот, который содержит конфигурации маршрутизатора React)
  2. header.jsx(компонент заголовка)
  3. footer.jsx(компонент колонтитула)
  4. posts.jsx(для архива сообщений)
  5. post-list.jsx(компонент для отдельной должности в posts.jsx пределах)
  6. post.jsx(для одного поста)
  7. products.jsx(содержит все продукты из WooCommerce)
  8. product.jsx(отображает один продукт от WooCommerce)
  9. style.scss(содержать весь код CSS в формате SASS)
Folder structure of src folder
Структура папки SRC в Небесном проекте.

ReactDOM.render()

Файл index.jsx является корнем проекта. То, что я имею в виду, что это, index.jsx содержит компонент App, который оказывается DOM.

import { render } from 'react-dom'; // importing render from ReactDOM

const App = () => ( // defining the routes

   <div id="page-inner">

       <Header />

       <div id="content">

           <Switch>

               <Route exact path={CelestialSettings.path} component={Posts} /> // the root path

           </Switch>

       </div>

       <Footer />

   </div>

);

// React Router

const routes = (

   <Router>

       <Route path="/" component={App} />

   </Router>

);

render( // rendering to the DOM by replacing #page with the root React component

   (routes), document.getElementById('page') // rendering the route

);

Остальные компоненты указаны в маршрутизаторе React и будут загружены при посещении различных маршрутов.

Так мы пишем модульные компоненты, где все различные компоненты в конечном счете заканчиваются на index.jsx.

Состояние против безастяных компонентов

Вы заметили бы компоненты, написанные в любом из следующих двух способов:

  1. const App = () => (
  2. class Post extends React.Component {

Первый способ заключается в том, как мы пишем агатовые компоненты, а второй является примером государственных компонентов. Апоприс означает, что компонент не имеет в нем «состояния». «состояние» — это, по сути, переменная, соотвествующие в компоненте, и каждый раз, когда переменная изменяется, компонент переиздарен. Компоненты состояния также известны как «умные компоненты». Таким образом, переменные состояния используются для внутренней коммуникации внутри этого компонента.

Второй тип, компоненты без гражданства, не имеют в них переменной состояния, а иногда и называются «Компоненты Тупого». Однако, как Испотечие Компоненты, они имеют “реквизиты”, которые являются свойствами, передаваемыми им из родительских компонентов.

Компоненты состояния имеют методы жизненного цикла React, в то время как у Аабеза есть только render() метод, который является для него методом по умолчанию.

Методы реагирования на жизненный цикл

Это методы, называемые на разных стадиях жизненного цикла компонента, которые мы можем переопределить для запуска нашего собственного кода в этих случаях. Мы исследуем следующие методы в нашем приложении:

  • constructor()
    Вызывается перед установкой компонента.
  • componentDidMount()
    Вызывается сразу после установки компонента.
  • render()
    Метод, который называется визуализацией содержимого JSX (HTML).
  • componentDidUpdate()
    Вызывается при обновлении компонента.
  • componentWillUnmount()
    Вызывается при удалении компонента.

Примечание: Чтобы узнать больше о компонентах и их жизненном цикле, прочитайте документацию здесь.

Обещания JavaScript

Мы собираемся использовать JavaScript Promises для получения данных из нашего API WordPress REST. Во-первых, у нас есть URL к REST API в наших функциях.php, где мы приложили его как переменную JavaScript, к которой мы можем получить доступ с переднего конца.

Мы будем использовать метод API получения API JavaScript для получения данных из различных конечных точек. Мы добавляем погрузчик, чтобы показать пользователю во время получения содержимого:

getMorePosts() {
       var that = this;
       var totalPages;

       // adding a loader
       jQuery("#loader").addClass("active");

       this.setState({ page: this.state.page + 1 });

       fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page)
           .then(function (response) {
               for (var pair of response.headers.entries()) {

                   // getting the total number of pages
                   if (pair[0] == 'x-wp-totalpages') {
                       totalPages = pair[1];
                   }

                   if (that.state.page >= totalPages) {
                       that.setState({ getPosts: false })
                   }
               }
               if (!response.ok) {
                   throw Error(response.statusText);
               }
               return response.json();
           })
           .then(function (results) {
               var allPosts = that.state.posts.slice();
               results.forEach(function (single) {
                   allPosts.push(single);
               })
               that.setState({ posts: allPosts });

               // removing the loader
               jQuery("#loader").removeClass("active");

           }).catch(function (error) {
               console.log('There has been a problem with your fetch operation: ' + error.message);
               jQuery("#loader").remove();
           });
   }

Получение данных из различных конечных точек с помощью погрузчика для обозначения процесса.

Использование маршрутизатора реакции

React Router — это библиотека, которая будет обрабатывать маршрутизм на стороне клиента для нашего приложения. Маршрутирование на стороне сервера возможно с помощью WordPress, но для достижения действительно SPA опыт нам нужна помощь React Router.

Начиная с версии 4, React Router был разбит на три пакета: react-router react-router-dom , и react-router-native . Мы будем использовать react-router-dom для этого проекта, так как это тот, который используется в веб-приложений.

Поскольку react-router-dom мы уже установлены, мы можем написать конфигурацию маршрутизатора внутри файла index.jsx. Код будет следующим:

const App = () => (
   <div id="page-inner">
       <Header />
       <div id="content">
           <Switch>
               <Route exact path={CelestialSettings.path} component={Posts} />
               <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} />
               <Route exact path={CelestialSettings.path + 'products'} component={Products} />
               <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} />
               <Route path="*" component={NotFound} />
           </Switch>
       </div>
       <Footer />
   </div>
);

// Routes
const routes = (
   <Router>
       <Route path="/" component={App} />
   </Router>
);

render(
   (routes), document.getElementById('page')
);

Конфигурация маршрутизатора в файле index.jsx.Вышеупомянутый код будет заботиться обо всех размываниях, обрабатываемых в клиентской стороне. *В последней строке говорится, что любой другой маршрут, не упомянутый выше, приведет пользователя к странице ‘404 Not Found’.

<Link to="">Тег используется вместо <a href=””> тега для соединения между различными страницами с помощью маршрутизатора React:

<div className="navbar-nav">
                       <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link>
                       <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link>
</div>

Использование <Link to=""> тега для соединения между различными страницами.

Получение тестовых данных

Теперь, когда вы создали тему, пришло время добавить некоторые данные. Одним из способов добавления данных является создание собственного контента. Тем не менее, есть более простой (и лучше) способ добавить данные на наш сайт WordPress. Этот метод импортирует данные заполнителя из внешнего источника:

  • Отправляйтесь в https://codex.wordpress.org/Theme_Unit_Test и загрузите данные теста тематии
  • Заголовок к инструментам и импорту
  • После установки импортера WordPress нажмите на Run Importer.
  • Нажмите “Выбрать файл” в импортере
  • Выберите загруженный файл и импортируйте данные теста WordPress Theme Unit

Теперь вы должны выбрать тему-единица-тест-data.xml файл и все содержание заполнителя в настоящее время на вашем сайте.

Placeholder content imported successfully
При правильном импортировании всех данных.

ВуКоммерция Интеграция

Теперь мы готовы к власти нашего магазина с помощью React. Для этой цели мы будем использовать файлы products.jsx и product.jsx, чей код похож на posts.jsx и post.jsx соответственно.

Мы добавим еще три переменные к CelestialSettings под ‘woo’ (см. Глобальную переменную JavaScript):

  1. Url
  2. consumer_key
  3. consumer_secret

Потребительский ключ и секрет потребителя должны быть сгенерированы из панели мониторинга » WooCommerceНастройкиAPI – Ключи/приложения.

Для Ву URL, вы должны вручную добавить его (так как WooCommerce позволяет передавать только по SSL, добавить URL с https, т.е.). https://localhost/celestial/wp-json/wc/v2/

Копируйте ключ потребителя и секрет потребителя и вставьте их в соответствующих местах в рамках functions.php. Это будет служить в качестве аутентификации для доступа к WooCommerce через aPI вызова.

Для получения дополнительной информации о API можно найти документацию WooCommerce REST API. В файле products.jsx есть код для заполнения магазина продуктами. Продукты могут быть добавлены админ омнитом с панели мониторинга. Просто перейдите на панель мониторинга и продукты : Добавить новые и ввести детали продукта.

Add new product
Добавить новый продукт через приборную панель.

При нажатии на определенный продукт, вы будете приняты на странице product.jsx:

Individual product page
Индивидуальная страница продукта, отображаемый на основе файла product.jsx

Код для вышеуказанной страницы аналогичен post.jsx:

renderProduct() {
       return (
           <div className="card">
               <div className="card-body">
                   <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div>
                   <div className="col-sm-8">
                       <h4 className="card-title">{this.state.product.name}</h4>
                       <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p>
                       <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p>
                       <p className="card-text">{jQuery(this.state.product.description).text()}</p>
                   </div>
               </div>
           </div>
       );
   }

Код для файла product.jsx” alt'”Код для файла product.jsx

Для того, чтобы тема работала правильно, мы должны установить следующие постоянные ссылки в DashboardНастройки :

  1. В соответствии с общими настройками и пользовательской структурой:http://localhost/celestial/posts/%postname%/
  2. Под продуктами непостоянные ссылкипользовательская база:/products/

Если вы не установите permalinks как выше, то тема не может работать как пожелано.

WooCommerce Исправить

Когда вы переходите к localhost / небесных / продуктов,скорее всего, вы получите пустое пространство, где продукты должны быть загружены. Это происходит потому, что WooCommerce нуждается в аутентифицированных запросах, в то время как наш localhost не https. Чтобы устранить проблему:

  1. Посетите https://localhost/celestial/wp-json/wc/v2/products. Это даст нам предупреждение:
Warning when localhost is not https
WooCommerce требует аутентифицированных запросов и покажет предупреждение, если localhost не https
  1. Нажмите на ADVANCED
  2. Теперь, если вы вернетесь к странице продуктов, элементы будут отображаться правильно.

Примечание: Если вы находитесь на Valet на Mac, вы должны запустить Valet Secure на вашем сайте, чтобы обеспечить местный сайт с сертификатом TLS. Это еще один способ решения проблемы.

Что такое ScrollMagic?

ScrollMagic — это библиотека, которая позволяет выполнять определенные действия при прокрутке страницы. Для использования ScrollMagic мы будем enqueue библиотеки ScrollMagic JavaScript в functions.php. Мы используем ScrollMagic для двух экземпляров в этом проекте:

  1. Для ленивых загрузок в компоненте posts.jsx:
    componentDidMount() {
           var that = this;
           window.onbeforeunload = function () { window.scrollTo(0, 0); }
    
           // init ScrollMagic Controller
           that.state.controller = new ScrollMagic.Controller();
    
           // build scene
           var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" })
               .addTo(that.state.controller)
               .on("enter", function (e) {
                   if (that.state.getPosts && that.getMorePosts !== null) {
                       that.getMorePosts();
                   }
               });
       }
    

    Ленивые погрузки постов в компоненте posts.jsx

  2. Чтобы показать увядание в анимации для сообщений, появляющихся путем прокрутки сообщений и продуктов в posts.jsx и products.jsx компонентов соответственно:
    componentDidUpdate() {
           var FadeInController = new ScrollMagic.Controller();
           jQuery('.posts-container .col-md-4.card-outer').each(function () {
    
               // build a scene
               var FadeInScene = new ScrollMagic.Scene({
                   triggerElement: this.children[0],
                   reverse: false,
                   triggerHook: 1
               })
                   .setClassToggle(this, 'fade-in')
                   .addTo(FadeInController);
           });
       }
    

    Применение увядание в анимации для сообщений, которые появляются как прокрутка происходит

Теперь мы готовы смотреть нашу тему с фронта. Перейдите к localhost/небесной в вашем веб-браузере и посмотрите вашу тему в действии.

И погладить себя по спине, потому что вы уже успешно создали тему!

Другие темы WordPress с библиотеками JavaScript

Если вы нашли это полезным, вы можете взглянуть на другие удивительные отделены WordPress темы, построенные с использованием современных библиотек JavaScript / рамки:

  • Foxhound: Первый отделен тему, чтобы сделать его в WordPress темы репозитория. Автор Келли Дван, эта тема использует React, Redux и React Router.
  • Anadama React:Другая тема того же автора, но с помощью Flux вместо Redux, и страница вместо реактивного маршрутизатора.
  • Уоллес: Автор Кирби, эта тема использует Angular с WordPress REST API.
  • Пикард: Написано Automattic себя, чтобы продемонстрировать возможности WordPress REST API.
  • Реагировать стих: Реагировать и Redux тему я написал на основе Foxhound.

Следующие шаги

Основные разделы, которые я хотел показать вам, уже сделали. Вы можете продолжить строительство проекта для получения дополнительных знаний. Вот некоторые рекомендации, которые вы могли бы продолжить:

  1. Полноценный магазин с плагином WooCommerce, включая кассу и корзину;
  2. Страница для архива, тег, таксономия и так далее;
  3. Государственное управление с Redux или Flux.

Удачи и счастливого кодирования!

Источник: smashingmagazine.com

Великолепный Журнал

Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.

Добавить комментарий

%d такие блоггеры, как: