2

Desenvolvi um layout one-page o qual o cliente solicitou que uma parte do site seja gerenciável, algo que não estava no projeto no início.

É uma simples linha entre <p> e </p>

Qual a forma mais fácil de fazer isso?

PS: Não trabalho com PHP

9
  • Os textos/seções seriam fixos por exemplo, cabeçalho, texto do menu, texto div principal, rodapé?
    – rray
    Commented 27/10/2014 às 22:24
  • Isso mesmo, tem uma parte do site que tem um texto e uma imagem, e o cliente quer deixar gerenciável. SÓ essa parte, o resto é tudo fixo mesmo. Commented 27/10/2014 às 22:26
  • Se você trabalha apenas com HTML e não quer trabalhar com o server-side (PHP, node.js, etc) sinto muito mas isso é impossivel, a não ser que seu cliente saiba html e FTP.
    – Olimon F.
    Commented 27/10/2014 às 22:54
  • Ele não sabe. Tem como fazer isso via Wordpress? Commented 27/10/2014 às 22:55
  • 2
    Felipe, por favor, prefira editar a pergunta para acrescentar detalhes. A gente não deveria precisar ler os comentários para entender a situação.
    – brasofilo
    Commented 27/10/2014 às 23:31

2 Respostas 2

6

Fazer com WordPress pode ser um pouco como colocar um trator onde precisava um fusca, mas normalmente esse tipo de coisa tende a escalar: hoje é um pequeno texto, amanhã são cinco textos e algumas imagens, e por aí vai.

No WordPress, dê ao cliente uma conta com a função de Autor. Usando essa conta, faça login e prepare um post que vai ser o que o cliente vai atualizar. Com o plugin Adminimize esconda tudo que for supérfluo para um usuário de nível básico.

Para puxar o conteúdo desse post específico no WordPress, recomendaria o plugin JSON REST API e sua técnica preferida de PHP ou JavaScript para popular seu HTML. Com ele instalado, use a URL http://exemple.com/wp-json/posts/{post-id} com o ID do post do cliente para receber um objeto JSON com o conteúdo do post.

Segue um exemplo de fazendo uma requisição AJAX a um blog que tem o JSON REST API ativado usando JavaScript puro. Para usar com jQuery, procurar aqui nestes resultados de busca.

/**
 * Faz chamada AJAX a um blog que tem o REST JSON API ativado
 * - busca por um post determinado ao iniciar
 * - oferece possibilidade de pedir outros IDs
 *
 * Inspirado em http://www.tutorialspoint.com/php/php_and_ajax.htm
 *
 * @param iniciar Boolean Usando para inicio da página ou envio do formulario
 */
function ajaxFunction(iniciar) {
  var ajaxRequest,
      ajaxDisplay = document.getElementById('ajaxDiv');;

  try {
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer Browsers
    try {
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        // Não tem jeito
        alert('Seu browser quebrou!');
        return false;
      }
    }
  }
  // Função que recebe retorno do Ajax
  ajaxRequest.onreadystatechange = function() {
    if (ajaxRequest.readyState == 4) {
      var parsed = JSON.parse(ajaxRequest.responseText);
      // console.log(parsed);
      ajaxDisplay.innerHTML = '<h1>' + parsed.title + '</h1>' + parsed.content;
    }
  }

  if (iniciar) {
    ajaxRequest.open("GET", "http://megane-blog.com/wp-json/posts/1400", true);
    ajaxRequest.send(null);
  } else {
    ajaxDisplay.innerHTML = 'Esperando JSON...';
    // Capturar valor e fazer chamada Ajax
    var post_id = document.getElementById('post-id').value;
    ajaxRequest.open("GET", "http://megane-blog.com/wp-json/posts/" + post_id, true);
    ajaxRequest.send(null);
  }
}

// Roda script ao carregar a página
ajaxFunction(true);
<form name='myForm'>
  Usar estes IDs como teste: 1377, 1366, 1355, 1331:
  <input type='text' id='post-id' />
  <input type='button' onclick='ajaxFunction()' value='Fazer AJAX' />
</form>
<div id='ajaxDiv'>Esperando JSON...</div>

4
  • O perguntador da questão não sabe mecher com PHP (mas talvez saiba js?), acho que serial legal dar um exemplo básico de um arquivo que puxa dados via ajax para ele.
    – Olimon F.
    Commented 27/10/2014 às 23:27
  • 1
    @Olimon, melhor um jQuery então... até posso colocar o exemplo, mas talvez seja melhor esperar o feedback do Felipe.
    – brasofilo
    Commented 27/10/2014 às 23:29
  • Muito obrigado pela resposta. Vou analisar melhor e tentar fazer conforma a resposta. Porém, se puder ser em JS, fica mais fácil, creio eu. Commented 28/10/2014 às 1:03
  • @Felipe, coloquei um exemplo e uma avenida para jQuery.
    – brasofilo
    Commented 28/10/2014 às 1:56
2

Felipe, não tem jeito, você pode usar uma "Ferrari" para resolver um problema simples, que seria o Wordpress nos moldes parecidos que o brasofilo respondeu, ou você cria um recurso próprio bem simples, que é o objetivo desta minha resposta.

Então deixo aqui para você optar a melhor forma. Vendo os comentários, se você quer usar JS, de qualquer forma será necessário um PHP para persistir os dados no banco de dados, via AJAX (existem outros recursos para gravação em BD, mas não é ideal nesse caso).

Quero dar esta opção para você em dois passos:

1. Um plugin JQuery para você conseguir editar o texto inline, ou seja, na mesma tela que você está visualizado o conteúdo:

2. De nada adianta o recurso acima se qualquer um puder editar, então recomendo a leitura abaixo para criar um sistema bem simples de autenticação em PHP. No seu caso, depois de autenticado, volta para a tela do site normal, porém habilitando os eventos de edição através do plugin acima. Segue o tutorial:

3. Arquivos PHP que "receberão o AJAX". Respeitando e entendendo os itens 1 e 2 você conseguirá fazer esta etapa sem problema.

Espero ter dado uma opção válida para seu projeto. Abraços.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .