Как я могу встроить сайт в страницу WordPress? - PullRequest
Новая
       99

Как я могу встроить сайт в страницу WordPress?

0 голосов
/ 05 августа 2020

У меня есть один веб-сайт на WordPress и один веб-сайт на основе mvc фреймворка. предположим, что URL-адрес выглядит как

  1. http://example.wordpress
  2. http://example.mvc

На самом деле я хочу показать содержимое http://example.mvc на http://example.wordpress/page.

Примечание: http://example.mvc имеет несколько URL-адресов. Этого можно добиться, создав несколько страниц, но я этого не хочу. Пожалуйста, помогите мне решить эту проблему.

Спасибо

1 Ответ

0 голосов
/ 08 августа 2020

Прежде всего вам нужно отредактировать страницу. php вашей темы. Если вы не хотите делать это для всех страниц, вы можете создать шаблон страницы. Просто скопируйте страницу. php и назовите ее page-yourname. php (выберите имя, которое вам нравится). Вверху этой страницы вы добавляете «Название шаблона: Ваше имя». Таким образом, wordpress будет использовать его как шаблон страницы. Теперь вы можете выбрать его из раскрывающегося списка в правой части страницы, отредактировать в бэкэнде под «атрибутами страницы».

Существует несколько способов отображения контента с другого веб-сайта.

  1. Использование фреймов: 
<iframe src="http://example.mvc" width="100%" height="300">
</iframe>
Использование встроенного: 
<embed src="http://example.mvc" width="100%" height="300" />
Использование Rest API (и т. Е. Vue JS)

Если вы просто хотите получить сообщения с другого сайта WordPress, вы можете использовать Rest API, чтобы получить эти сообщения и отобразить их на любой другой веб-странице. Например, вы можете использовать Vue JS, чтобы отобразить его внутри вашего шаблона страницы: 

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="posts">
    <div v-bind:key="post.title.rendered" v-for="post in posts">
        <a v-bind:href="post.link"><img v-bind:src="post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url"></a>
        <a v-bind:href="post.link"><h4 v-html="post.name"></h4></a>
        <p v-html="post.title.rendered"></p>
    </div>
</div>

<script>
new Vue({
el: '#posts',
data: {
    posts: [],
},
mounted() {
    fetch("https://yourWordpressURLhere.com/wp-json/wp/v2/posts?per_page=20&_embed=wp:term,wp:featuredmedia")
        .then(response => response.json())
        .then((data => {
            this.posts= data;
        }))
}
});
</script>
...