Перенести div с одного сайта WordPress на другой сайт WordPress

Вопрос или проблема

У меня есть 3 отдельных сайта/установки на одном сервере, и они все используют одну и ту же базу данных:

  • xxxx.com/en
  • xxxx.com/de
  • xxxx.com/es

Я хочу, чтобы <div> с определенного сайта на xxxx.com/en отображался на других сайтах. Допустим, у меня есть <div id="table1">xxxx<div> на xxxx.com/en/page1; я хочу, чтобы это отображалось на xxxx.com/de/page1.

Я не думал, что это будет так сложно в WordPress. В чистом PHP это было бы просто подключение, но WordPress – это закрытая система. Так как я могу сделать это?

Я бы предложил вам использовать плагины для перевода. Один простой и бесплатный, такой как PolyLang, значительно упростит задачу, и вы сможете использовать/создавать разные шаблонные страницы для каждого языка. Вот ссылка, чтобы начать:
https://www.wordpress.org/plugins/polylang/

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

  1. На исходной установке создайте страницу с собственным шаблоном, который включает только тот <div>, который вы хотите извлечь (без заголовка, подвала, боковой панели и так далее). Таким образом, вы можете заставить исходную установку собирать данные, точно так же, как если бы это был обычный пост. Вы даже можете использовать query_vars, если <div>, который вам нужен, динамический. В основном, вы должны убедиться, что исходная установка выдаёт нужный html с помощью такого запроса:

    http://example.com/en/mydivpage?my_var=something

  2. Теперь вам нужно извлечь этот html (который не является полной веб-страницей) в целевую установку. Возможно, самый простой способ – использовать команду jquery load.

    <script>$("#putithere").load("http://example.com/en/mydivpage?my_var=something");</script>
    ...
    <div id="putithere"></div>

  3. Наконец, чтобы это действительно работало, вам придется решить проблему безопасности. По умолчанию браузеры не позволят загружать html с другого домена, если только это не iframe. Тем не менее, вы можете разрешить определенным доверенным доменам нарушать это правило.

Я упомянул вариант с <iframe>. В пункте 1 убедитесь, что вы включили теги <head> и body. Затем в пункте 2 просто включите полную веб-страницу. Недостаток этого подхода заключается в том, что css страницы цели не будет работать внутри фрейма.

Ответ или решение

Чтобы извлечь блок <div> из одного сайта WordPress в другой, необходимо учитывать несколько аспектов, поскольку WordPress работает по своей уникальной логике и структуре. Предположим, у вас есть три сайта, работающие на одном сервере и использующие одну и ту же базу данных, а именно: xxxx.com/en, xxxx.com/de и xxxx.com/es. Вы хотите, чтобы <div id="table1">xxxx</div> с xxxx.com/en/page1 отображался на xxxx.com/de/page1.

Способы выполнения задачи

1. Создание специальной страницы с шаблоном

Для начала вам нужно создать отдельную страницу на исходном сайте (xxxx.com/en), которая будет использовать собственный шаблон. Этот шаблон должен содержать только нужный вам <div> без заголовка, подвала и сайдбара. Это обеспечит более удобный доступ к HTML-коду без лишних элементов. В шаблоне можно использовать функцию get_query_var(), если данные, которые вы хотите отобразить, динамические:

// Пример простого шаблона page-mydivpage.php
<?php
/* Template Name: My Div Page */
get_header();
?>
<div id="table1">xxxx</div>
<?php
get_footer();
?>

Теперь вы можете получить доступ к этой странице, например, по адресу: http://xxxx.com/en/mydivpage?my_var=something.

2. Загрузка HTML-кода в целевой установке

На целевом сайте (xxxx.com/de) вы можете использовать метод jQuery для загрузки HTML-кода. Вот как это можно сделать:

<script>
$(document).ready(function() {
    $("#putithere").load("http://xxxx.com/en/mydivpage?my_var=something");
});
</script>
<div id="putithere"></div>

Этот скрипт поместит содержимое, полученное из источника, в элемент с ID putithere.

3. Устранение проблем с безопасностью

Стоит отметить, что по умолчанию браузеры ограничивают возможность загрузки ресурсов с другого домена. Это может привести к ошибке CORS (Cross-Origin Resource Sharing). Чтобы разрешить доступ, необходимо настроить заголовки на вашем сервере (например, через файл .htaccess или настройки сервера):

Header set Access-Control-Allow-Origin "*"

Этот заголовок позволяет всем доменам получать доступ, однако более безопасным вариантом будет указание конкретных доменов, которым разрешен доступ.

4. Альтернативный способ: использование iframe

Если вам не нужно сильно беспокоиться о стилях или взаимодействии с другим контентом, вы можете использовать элемент <iframe>, который обернет всю страницу. Убедитесь, что вы включили необходимые <head> и <body> теги на целевой странице:

<iframe src="http://xxxx.com/en/mydivpage?my_var=something" style="border:none;"></iframe>

Этот метод проще в реализации, но он имеет ограничения по стилям, так как CSS целевого сайта не будут применяться внутри <iframe>.

Заключение

Таким образом, у вас есть несколько способов интеграции содержимого между сайтами WordPress. Первый метод с использованием шаблонов и jQuery является более гибким и предпочтительным с точки зрения производительности и совместимости. Второй метод с <iframe> проще в реализации, но менее универсален из-за ограничения на стили.

Следуя этим шагам, вы сможете эффективно извлечь и отображать необходимый контент вашего сайта в других местах.

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

Капча загружается...