Вопрос или проблема
У меня есть 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/
Конечно, это можно сделать, но потребуется некоторая работа. Вот подход, который я бы использовал:
-
На исходной установке создайте страницу с собственным шаблоном, который включает только тот
<div>
, который вы хотите извлечь (без заголовка, подвала, боковой панели и так далее). Таким образом, вы можете заставить исходную установку собирать данные, точно так же, как если бы это был обычный пост. Вы даже можете использоватьquery_vars
, если<div>
, который вам нужен, динамический. В основном, вы должны убедиться, что исходная установка выдаёт нужный html с помощью такого запроса:http://example.com/en/mydivpage?my_var=something
-
Теперь вам нужно извлечь этот html (который не является полной веб-страницей) в целевую установку. Возможно, самый простой способ – использовать команду jquery load.
<script>$("#putithere").load("http://example.com/en/mydivpage?my_var=something");</script>
...
<div id="putithere"></div> -
Наконец, чтобы это действительно работало, вам придется решить проблему безопасности. По умолчанию браузеры не позволят загружать 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>
проще в реализации, но менее универсален из-за ограничения на стили.
Следуя этим шагам, вы сможете эффективно извлечь и отображать необходимый контент вашего сайта в других местах.