Полный html, скрипты и css для Wordpress без заголовка темы, нижнего колонтитула, боковой панели

#php #html #wordpress #wordpress-theming #wordpress-rest-api

Вопрос:

Моя конечная цель-потреблять сообщения хранятся в WordPress сайт из мобильного приложения (в реагировать родной, который показывает сообщение внутри WebView компонент), а для этого мне нужно каким-то образом получить достаточно полноценного HTML-содержимое поста не тема WordPress связанные вещи, как заголовок, нижний колонтитул, боковая панель.

Что я имею в виду под достаточно полноценным html? Что ж, позвольте мне кое-что сказать о проблеме, с которой я столкнулся.

Я попытался получить HTML-код сообщения просто с помощью get_post($postID)->post_content (и после того, как я также попытался напрямую вызвать API REST WordPress JSON, но с тем же результатом). Этот html не всегда хорошо визуализируется React из-за некоторых отсутствующих CSS и JavaScript, и это происходит, когда я использую какой-либо плагин WordPress для добавления пользовательского контента в сообщение. Я понял это, когда использовал премиум-плагин WordPress UniteGallery для добавления фотогалереи в сообщение, и когда React отрисовал версию сообщения в формате JSON, в ней вообще не отображались фотогалереи, вместо этого отображалось красное сообщение (в обычном HTML-содержимом).:
UniteGallery css amp; scripts missing, check if your template includes wp_footer().

Поэтому я открыл в обычном браузере полную веб-страницу, на которой отображается одно и то же сообщение, и сравнил этот HTML-код с версией JSON.
Сначала я заметил разницу в размере: веб-страница почти 2 МБ, версия JSON составляет около 20 КБ. По этой причине я хотел бы избежать таких решений, когда (Реагируют) Приложение должно загрузить всю веб-страницу и после введения CSS скрыть материалы, связанные с темой сайта, такие как заголовок, меню, боковая панель и нижний колонтитул.
вместо этого я хотел бы подготовить (на стороне сервера) html (не слишком большой размер), чтобы приложение могло использовать его как есть.

Я обнаружил, что огромный HTML-код можно логически разделить на 4 блока:

БЛОК1: много материалов, связанных с темой: определения стилей (более 70% содержимого) и нежелательный заголовок темы
БЛОК2: содержимое поста (почти идентично JSON-версии)
БЛОК3: нежелательная боковая панель виджетов и нижний колонтитул (материал, связанный с шаблоном темы)
БЛОК4: импорт css, импорт javascript и некоторые блоки javascript.

Далее следует выдержка из » огромного HTML’:

 <!DOCTYPE html>
<html>

<!-- ********* BLOCK1 STARTS ********* -->
  <head>
    <title>Post Title</title>
  
    <!-- several theme-related meta and css link tags -->
    <!-- few theme-related javasdcript blocks and imports-->

    <!-- REACT-RENDER REQUIREMENT no. 1: 2 jQuery imports -->
    <script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
    <script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>

    <style id="fusion-stylesheet-inline-css" type="text/css">
      /* = = = = = > HUGE REACT-UNUSED theme-related CSS BLOCK < = = = = = */
    </style>
  </head>

  <body>
    <!-- SURELY UNWANTED HEADER related stuff -->

<!-- ********* BLOCK1 ENDS ********* -->

<!-- ********* BLOCK2 STARTS: THE_CONTENT ********* -->
    <article id="post-1234" class="post post-1234 type-post status-publish">
      <h1 class="entry-title">Post Title</h1>
      <div class="video-shortcode">
        <iframe title="YouTube video player" src="https://www.youtube.com/embed/Suib_DXOj0E?wmode=transparentamp;autoplay=0" width="800" height="450" allowfullscreen allow="autoplay; fullscreen"></iframe>
      </div>
      <div class="fusion-fullwidth" style="padding:0px;margin: 0px;border-width: 0px 0px 0px 0px;border-style:solid;">
        <p><strong>Photo Gallery1 Title</strong></p>
        <div id='unitegallery_1_1' class='unite-gallery' style='margin:0px auto;'>
          <img alt="_FCO0020" src="" data-image="https://example.com/wp-content/uploads/FCO0020.jpg" data-thumb="https://example.com/wp-content/uploads/FCO0020-300x200.jpg" title="" style="display:none">
          <img alt="_FCO0022" src="" data-image="https://example.com/wp-content/uploads/FCO0022.jpg" data-thumb="https://example.com/wp-content/uploads/FCO0022-300x200.jpg" title="" style="display:none">
          <!-- FOLLOWS A LOT OF PICTURES OF THE PHOTO-GALLERY -->
        </div>
        <!-- Follows the Javascript block the check the presence of UniteGallery library, and display the red error -->
        <script type='text/javascript'>
          window.onload = function (e) {
            if (typeof ugCheckForErrors == "undefined") {
              document.getElementById("unitegallery_1_1").innerHTML =
                "<span style='color:red'>Unite Gallery Error - gallery js and css files not included in the footer. Please make sure that wp_footer() function is added to your theme.</span>";
            }
            else { ugCheckForErrors("unitegallery_1_1", "jquery"); }
          };
        </script>
      </div>
    </article>
<!-- *** BLOCK2 ENDS *** -->

<!-- *** BLOCK3 STARTS *** -->
    <aside id="sidebar" class="sidebar fusion-blogsidebar" style="float: right;">
      <!-- SURELY UNWANTED SIDEBAR related stuff-->
    </aside>
    <div class="fusion-footer">
      <!-- SURELY UNWANTED FOOTER related stuff-->
    </div>
<!-- *** BLOCK3 ENDS *** -->

<!-- *** BLOCK4 STARTS *** -->
    <div class="avada-footer-scripts">
      
      <!-- some theme-related css link -->

      <!-- REACT-RENDER REQUIREMENT no. 2: UniteGallery CSS link -->
      <link rel='stylesheet' id='unite-gallery-css-css' href='https://example.com/wp-content/plugins/unitegallery/unitegallery-plugin/css/unite-gallery.css?ver=5.7.2' type='text/css' media='all' />

      <!-- many theme-related imports and javascript blocks -->

      <!-- REACT-RENDER REQUIREMENT no. 3: UniteGallery JS imports -->
      <script type='text/javascript' src='https://example.com/wp-content/plugins/unitegallery/unitegallery-plugin/js/unitegallery.min.js?ver=5.7.2' id='unitegallery_main-js'></script>
      <script type='text/javascript' src='https://example.com/wp-content/plugins/unitegallery/unitegallery-plugin/themes/tiles/ug-theme-tiles.js?ver=5.7.2' id='unitegallery_tiles_theme-js'></script>

      <!-- REACT-RENDER REQUIREMENT no. 4: UniteGallery gallery unhiding -->
      <script type='text/javascript'>
        var ugapi1;
        jQuery(document).ready(function () {
          var objUGParams = {
            gallery_theme: "tiles",
            gallery_width: "100%",
            tiles_type: "nested"
          };
          if (ugCheckForErrors('#unitegallery_1_1', 'cms'))
            ugapi1 = jQuery('#unitegallery_1_1').unitegallery(objUGParams);
        });
      </script>

    </div>
<!-- *** BLOCK4 ENDS *** -->

  </body>
</html>

Поэтому я попытался добавить строки (CSS и JavaScript), которые я выделил комментариями в приведенном выше коде, REACT-RENDER REQUIREMENT к JSON-версии поста (жестко закодировав эти строки), а затем правильно отреагировать на фотогалереи в посте. Фотогалереи уже были там, но скрыты (со стилем display:none ) и должны обрабатываться с помощью CSS и JavaScript, которые я добавил вручную.
Примечание. Я добавил следующие обязательные строки:

2 Импорт jQuery из БЛОКА
UniteGallery импортирует и javascript из БЛОКА 4, хотя не все css и javascripts, присутствующие в БЛОКЕ 4, необходимы для получения рабочей фотогалереи UniteGallery: большинство из них связаны с тематикой веб-сайта.

То, что я пытался систематически добавлять в HTML недостающие материалы, связанные с плагинами, выглядит примерно так:

 ob_start(); // <- buffer following outputs
wp_head(); // <- output header stuff
$post = new WP_Query('p ='. $postID);
if ($post->have_posts())  $post->the_post(); // <- output post content
wp_footer(); // <- output footer stuff
$full_post_content = ob_get_contents(); // get the output buffer
ob_end_clean(); // <- clear buffer and stop buffering
// -> save $full_post_content to DB table 'app_posts'

Таким образом, содержимое поста обогащается импортом CSS и JavaScript UniteGallery, но по-прежнему отсутствует импорт jQuery (см. БЛОК 1 выше) и блок JavaScript UniteGallery, который открывает фотогалерею (см. Конец блока 4 выше), после чего фотогалерея в посте по-прежнему не отображается.

Я столкнулся с проблемой, используя UniteGallery, но на самом деле я полагаю, что любой плагин, добавляющий пользовательский контент в сообщение, потенциально может создать содержимое сообщения, которое не может быть правильно отображено React, если содержимое сообщения извлекается JSON-REST-API.

По этой причине я ищу такой способ (например, в моем пользовательском плагине WordPress) для сохранения HTML-версии сообщений, которая включает:

light JSON-версия содержимого поста
CSS и JavaScripts необходимы для правильного отображения такого сообщения в React, учитывая плагины, участвующие в обогащении содержимого сообщения

и это то, что я имел в виду в начале вопроса с «достаточно полноценным HTML-контентом поста».
Очевидно, я не знаю, есть ли встроенный инструмент/API WordPress, который может этого достичь, но я открыт для разработки такого пользовательского плагина, чтобы упростить работу пользовательского контент-менеджера WordPress.

1. Извините, возможно, мой комментарий будет для вас слишком строгим, но я действительно хочу вам помочь, я разрабатываю темы и приложения с использованием WordPress, поэтому мне кажется, что вы думаете в неправильном направлении, вы хотите использовать WordPress в качестве базы данных и админки для постов? Правильно ли я понял? Будет ли приложение написано с использованием react? Вы можете использовать WordPress в качестве панели администратора, отключить всю переднюю часть и использовать rest-api, а клиент пишет в react, весь ваш html должен быть встроен в react на основе данных из rest-api

2. У меня уже есть сайт wordpress с опубликованным различным контентом (новости, сообщения, управление событиями, медиа-галереи и т.д.). На самом деле я разрабатываю мобильное приложение, которое извлекает контент из разных источников (твиты из моей учетной записи Twitter, видео с моего канала YouTube, посты с сайта WordPress, а приложение написано с использованием react-native (будет опубликовано как для iOS, так и для Android).

3. Это хорошо, но вы вытаскиваете все из социальных сетей с помощью api, и в WordPress вы должны сделать то же самое, вы должны забыть о том, что у вас есть в WordPress, я имею в виду внешний вид, вы должны создать шаблон html/css для поста и визуализировать его, используя данные из api workdress на стороне react.

4. Ну, скажите мне, правильно ли я понял: вы предлагаете создать пользовательский шаблон сообщения wordpress, который будет использоваться для правильной визуализации в react? Если да, не могли бы вы подсказать мне, как использовать этот пользовательский шаблон только «для приложения», а не для обычного отображения сообщений на веб-сайте? Поэтому я имею в виду/подумайте, как использовать этот шаблон программно

5. Тема отвечает за отображение постов, это множество стилей и скриптов, а также шаблонов php, вы не можете взять и вырвать содержимое своей страницы и отобразить его в своем приложении, самое большее, чтобы сэкономить время, вы можете отображать свои посты в iframe, удалив верхний и нижний колонтитулы из шаблона, это будет самый быстрый и неудобный способ для ваших пользователей

Ответ №1:

Если я вас правильно понимаю, вы хотите отображать свои существующие сообщения с сайта WordPress в приложении react, то именно так это и должно быть сделано:

Немного теории

Тема и плагины отвечают за отображение пользовательского интерфейса (html, css, js) на клиентской стороне сайта WordPress. За отображение сообщений, скорее всего, отвечает ваша тема (если вы не используете плагины конструктора или другие плагины) Тема-это набор php-файлов, в которые включены верхний, нижний и нижний колонтитулы, а также другие области. Каждый тип сообщения имеет свой собственный шаблон (в зависимости от темы). Но суть всегда одна и та же, это php-код, в котором отображается отображение текущего поста и включены различные скрипты и стили, а для плагинов это много-много скриптов, стилей и php.. так зачем я это пишу?? Дело в том, что вытащить что-то из середины практически невозможно!

Почему это плохо и сложно сделать (отобразить готовый html со всеми стилями и сценариями в приложении react):

У вас определенно возникнет конфликт в сценариях
У вас не будет легкой страницы, как вы хотели, вам обязательно нужно будет загрузить много разных скриптов, например, jQuery, так как он определенно будет использоваться в wordpress
Это трудный и неправильный путь.

Теперь что ты можешь сделать:

Решения

Правильный способ: Используйте REST API WordPress, я предлагаю забыть о отображении ваших постов на вашем сайте, создать свой собственный шаблон html и css и преобразовать его в шаблон реакции. Извлекайте данные из API WordPress динамически при загрузке страницы react и отображайте свой пост. Смотрите посты REST API wordpress
Второй способ, это быстрый способ, но не удобный для пользователя. Используйте iframe

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

вы можете добавить параметр get для ссылок на публикации, который будет указывать, что ссылка открывается в iframe: ваш.сайт/сообщения/123?iframe_mode=true

затем откройте header.php шаблон и добавьте туда следующий код:

 <html <?php language_attributes(); ?> class="no-js no-svg <?php $s=''; if(isset($_GET['iframe_mode'])) {$s="iframe-mode"} print $s; ?>">

Теперь напишите правила css, что вы хотите скрыть от iframe

 .iframe-mode .my-navbar {display: none}
/*... etc*/

Вы также можете скрыть нежелательные части из выходных данных шаблона (не нижний колонтитул!)

 <php if(!isset($_GET['iframe_mode'])): ?>
<?php get_template_part( 'template-parts/header/site-header' ); ?>
<?php endif; ?>

Вывод

В общем, советую вам первый вариант! WordPress будет работать так же, как и раньше, вы просто открываете api rest для сообщений, если он закрыт, и используете его в своем приложении react, извлекаете данные и визуализируете в приложении react без использования html и прочего из WordPress, только данные JSON! Удачи!

1. Я хотел бы следовать правильным путем (вариант 1) и получить более легкий контент для публикации в json->контент ->>, отображаемый из REST API, но проблема возникает, когда в сообщении я использую какой-либо плагин для размещения контента (т. Е. это UniteGallery) , то содержимое сообщения JSON неправильно отображается React из-за отсутствия материалов (js и/или css). Вместо этого, когда в своем посте я использую встроенные компоненты «слайдер» и «галерея», предоставляемые Avada premium page builder, которые я использую, они, похоже, являются html-и js-автономными в JSON. Нет ли (даже если это сложно) способа получить достаточно автономный json через REST API?

2. покажите пример такого контента со сценариями, стилями и т.д.

3. Вопрос отредактирован для лучшего объяснения проблемы и включения примера этого контента