Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Include com página externa

por Guilherme Teixeira
| 53.4k xp | 16 posts

Bom dia,

Eu criei um post esses dias e o André Chaves me deu a solução, eu até tentei começar o curso de React mas como meu conhecimento em programação é muito básico e meu tempo é curto, não consegui prosseguir e abri este outro post aqui para pedir ajuda novamente.

Post anterior: https://cursos.alura.com.br/forum/topico-include-funciona-como-iframe-67680

Problema: Eu preciso que seja carregada na tag main da minha página uma página externa.

1ª Tentativa: Tentei com include e não deu certo pois esta página possui estilos e scripts que interferem na minha página.

2ª Tentativa: Tentei fazer com iframe, porém é uma tecnologia extremamente ultrapassada e busquei outra opção mais atualizada.

O que vocês me recomendam que não seja algo muito complicado?

7 respostas
por Diego Brocanelli
| 283.3k xp | 60 posts
Desenvolvedor Full Stack

Boa tarde, Guilher. Se entendi direito, você quer pegar um conteúdo de uma página web e embutir no sua página, porém sem a utilização do iframe.

a função file_get_contents pode ser uma alternativa, se compreende bem a sua dúvida.

Basta chamar a função passando a URL.

$site = file_get_contents('http://casadocodigo.com.br');

O exemplo acima irá retornar o conteúdo da página inicial da Casa do código.

Att,

por Guilherme Teixeira
| 53.4k xp | 16 posts

Olá Diego tudo bem?

Primeiramente obrigado pela atenção.

Eu tentei aqui e deu certo, mas não foi o resultado que eu esperava, talvez o que eu queira seja muito avançado, eu não tenho muito conhecimento em programação e não tenho como me dedicar e me aprofundar nisso agora.

Deve ter alguma forma simples de fazer o que eu preciso, só não sei como.

Eu possuo uma página toda estruturada, só que eu construí um blog no WP e gostaria de colocar esse blog dentro da tag main, mantendo o header e o footer conforme as outras páginas.

Quando utilizo o file_get_contents para incluir a página do blog, os estilos e scripts do blog se misturam com os da minha página.

Eu dei o exemplo do iframe porque ele cria um tipo de isolamento, onde o que está dentro do iframe não interfere no que está fora.

Veja abaixo o código como ficou:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
    <header>
        <?php include('header.php') ?>
    </header>
    <main>
        <?php $url = file_get_contents('https://www.wrseg.com.br/novo/blog/'); echo $url; ?>
    </main>
    <footer>
        <?php include('footer.php') ?>
    </footer>
</body>
</html>

O código acima pode ser visualizado no endereço abaixo https://www.wrseg.com.br/novo/blog/blog.php

Esta é a página do blog que quero inserir: https://www.wrseg.com.br/novo/blog/

Esta é a aparência da página inicial do site que estou desenvolvendo, quero só trocar o conteúdo principal pelo conteúdo do blog mantendo o mesmo cabeçalho e o mesmo rodapé. https://www.wrseg.com.br/novo/

Com iframe fica conforme esperado, porém sei que não é boa prática utiliza-lo. Veja abaixo o resultado com iframe como fica. https://www.wrseg.com.br/novo/blog/blog-iframe.php

por Diego Brocanelli
| 283.3k xp | 60 posts
Desenvolvedor Full Stack

Olá, Guilherme.

Como o blog é em wordpress e se utilizássemos o rss fornecido por ele para ler os posts e inserir no site? Não iria usar iframe, você ainda teria o controle do layout pois você estilizaria conforme seu desejo.

O que acha dessa ideia?

por Guilherme Teixeira
| 53.4k xp | 16 posts

Olá Diego, obrigado mais uma vez. Sinceramente não sei como fazer isso, eu procurei por rss nos cursos da Alura e não encontrei nada, no painel do WP eu vi que tem alguns plugins de rss para serem instalados. Eu não sei por onde começar, estou fazendo umas pesquisas aqui quando sobra uma tempo para evitar de fazer perguntas idiotas, mas sinceramente estou perdido, sem saber o que fazer, se você puder me indicar o caminho eu posso pesquisar e me virar sozinho, desde que não seja programação back que não sei nada, rsrs.

Obrigado, abraço

por Guilherme Teixeira
| 53.4k xp | 16 posts

Consegui fazer alguma coisa aqui, não está bonito mas da pra entender, achei um código pronto na Web e adaptei.

Veja como ficou puxando o rss https://www.wrseg.com.br/novo/blog/index-feed.php

Mas quando eu clico num link para abrir o post ele vai pra página do post sem o header e o footer. Não estou vendo outra saída a não ser desenvolver meu header e footer dentro do tema do WP.

Seção que pega o feed e exibe:

<div class="content">

 <?php

 $url = "https://www.wrseg.com.br/novo/blog/feed/";
 if(isset($_POST['submit'])){
   if($_POST['feedurl'] != ''){
     $url = $_POST['feedurl'];
   }
 }

 $invalidurl = false;
 if(@simplexml_load_file($url)){
  $feeds = simplexml_load_file($url);
 }else{
  $invalidurl = true;
  echo "<h2>Invalid RSS feed URL.</h2>";
 }


 $i=0;
 if(!empty($feeds)){

  $site = $feeds->channel->title;
  $sitelink = $feeds->channel->link;


  foreach ($feeds->channel->item as $item) {

   $title = $item->title;
   $link = $item->link;
   $description = $item->description;
   $postDate = $item->pubDate;
   $pubDate = date('D, d M Y',strtotime($postDate));


   if($i>=5) break;
  ?>
   <div class="post">
     <div class="post-head">
       <h2><a class="feed_title" href="<?php echo $link; ?>"><?php echo $title; ?></a></h2>
       <span><?php echo $pubDate; ?></span>
     </div>
     <div class="post-content">
       <?php echo implode(' ', array_slice(explode(' ', $description), 0, 20)) . "..."; ?> <a href="<?php echo $link; ?>">Saiba mais</a>
     </div>
   </div>

   <?php
    $i++;
   }
 }else{
   if(!$invalidurl){
     echo "<h2>No item found</h2>";
   }
 }
 ?>
</div>

Código CSS:

<style>
    .content{
    width: 50%;
    margin: 0 auto;
}


h1{
    border-bottom: 1px solid gray;
}

h2{
    color: black;
}
h2 a{
    color: black;
    text-decoration: none;
}

.post{
    border: 1px solid gray;
    padding: 5px;
    border-radius: 3px;
    margin-top: 15px;
}

.post-head span{
    font-size: 14px;
    color: gray;
    letter-spacing: 1px;
}

.post-content{
    font-size: 18px;
    color: black;
}
</style>
solução!
por Guilherme Teixeira
| 53.4k xp | 16 posts

Queria encontrar uma forma mais fácil de fazer isso, mas não encontrei, estou editando do código fonte do tema instalado e inserindo o meu header e footer.

https://www.wrseg.com.br/novo/blog/

por Diego Brocanelli
| 283.3k xp | 60 posts
Desenvolvedor Full Stack

Olá, Guilherme.

Estive meio ausente devido a correria, entendo seu ponto, não seria possível migrar o site para o Wordepress e ficar tudo dentro de uma única página/tecnologia?

Quando me refere a rss, o WP fornece esse recurso, onde lhe dará uma forma de ler o conteúdo do WP e com isso você pode estilizar da maneira como desejar, pois a grosso modo será enviado em texto o conteúdo do blog. Por isso essa minha sugestão anteriormente, pois vc teria o seguinte cenário:

  • Blog em WP fornecendo acesso via RSS.
  • Site lendo e formatando os dados do RSS, conforme desejado.

Att,