Como adicionar CSS para o editor WYSIWYG TinyMCE Wordpress e tê-lo na página Mostrar

Maio 29, 2016 Admin Tecnologia 0 102
FONT SIZE:
fontsize_dec
fontsize_inc

Eu criei sites Wordpress movidos para um número de clientes recentemente e têm lutado com o problema que o editor TinyMCE não está definido para ser verdadeiramente WYSIWYG (What You See Is What You Get). Isso torna difícil para os clientes a inserir e editar informações sobre as páginas e posts.

Depois de passar horas procurando por fóruns e blogs vêm-se com uma configuração que parece funcionar. Cada uma das etapas podem ser encontrados em várias fontes, mas eu só queria colocar tudo para baixo em um lugar assim eu me lembro-lo para uso futuro, e esperando que ele vai salvar os outros um pouco "de tempo.




Avançando

Aqui estão as principais etapas da instalação e cada etapa é detalhado abaixo. Existem muitos outros benefícios e usos para cada um dos pontos, mas eu lidar apenas com a obtenção dos estilos editor e mostrando no página ou post uma vez adicionado.

  • Criar tema criança de seu tema atual.
  • Adicionar editor-style.css arquivo na pasta do tema do bebê.
  • Faça deste novo bebê tema tópico atual.
  • Defina importação editor style.css de em style.css em termos de a criança.
  • Instale o plugin TinyMCE Avançada
  • Adicionar Estilos de botão para os botões em ambientes TinyMCE avançadas.
  • Marque a caixa importação editor-style.css em TinyMCE Configurações avançadas.
  • Adicionar estilos editor para style.css
  • Apenas mudar estilos editor TinyMCE em content.css.

Criar Wordpress tema do bebê

Um tema infantil é um tema que usa arquivos e estilos de o tema principal e as adições à criança a ignorar o tema principal. Quando você mudar um tema que sempre é útil para criar uma criança e fazer as mudanças lá ao invés de alterar o pai, isso permite que o pai a ser recuperado ou atualizado, sem perder as mudanças na criança.

O mínimo necessário para criar uma criança é um diretório chamado temas infantis em WordPress diretório temas e um arquivo style.css na importação diretório do tema informação pai.

Para definir o bebê tema mychildtheme de acordo pai temático MeuTema.

  • Adicione o diretório para o tópico wp-content/themes/mychildtheme
  • Na nova lista de criar o arquivo style.css e editor-style.css
  • Adicionar conteúdo a Style.css

    / * Código * Iniciar /

    / *
    Tema Nome: mychildtheme
    Tema URI: opcional
    Descrição: opcional
    Versão: opcional
    Autor: opcional
    Autor URI: opcional
    Template: MeuTema
    * /

    / * Top * /
    / * A linha de importação seguinte deve ser a primeira linha * /

    url importação ("http://yoursite.com/wp-content/themes/mytheme/style.css");


    / * Os conjuntos acima do tema dos principais temas do bebê e importações estilos.

    Para economizar tempo depois de adicionar a segunda linha da importação de folha de estilo agora * /

    url importação ("editor-style.css");

    / * Código final * /

Agora você tem o seu novo tema criança no tema atual

Em WordPress admin Painel de instrumentos, selecione Aparência e Temas seu bebê novo tema deve estar na lista de temas disponíveis, basta selecionar Ativar. Agora, quando você visualizar as páginas, não deve haver nenhuma diferença como nenhuma mudança foi feita ainda, mas vendo usando o tema do bebê.

Instale TinyMCE Avançada

Agora, em Wordpress painel de instrumentos, selecione plugins e, em seguida, adicionar novo. Utilize o pesquisa função para TinyMCE Avançada plugin e instalar e ativar.

Retornar para a painel de instrumentos, selecione Definições e Avanços Tiny MCE é agora uma opção na lista de configurações disponíveis. Selecione esta opção e você será mostrado na página seguinte. Como você pode ver, existem muitos botões úteis que podem ser arrastados e soltos para ser adicionado aos botões availailable usam o editor, mas estamos apenas considerando o estilos de descida e caixa de importação editor styles.css. Arraste os estilos de botão à barra de ferramentas, selecione a importação editor-style.css e salvar as alterações.

Adicionar estilos ao style.css editor

Agora você está pronto para adicionar qualquer estilo que você quer mudar o editor-style.css. Estilos adicionadas a este arquivo nesta configuração afetará tanto o editor e a página ou post.

Se os estilos não aparecem imediatamente pode ser porque os arquivos CSS são armazenados em cache no browser. Limpe o cache do navegador e reinicie o editor ou página para ver os estilos para fazer efeito.

Estilos colocados em editor-style.css STRT que com um ponto (classe estilo) aparecerá no estilo downhill lista para o futuro seleção pelo usuário, ou ainda mais importante para o usuário do cliente.

Nota: Os tópicos listados no Formato suspensa lista e influenciar o editor, como fonte padrão no editor estão no arquivo no diretório TinyMCE content.css como se segue.
wp-includes \ js \ tinymce \ Themes \ skins Avançado \ \ wp-tema \ content.css


Web Design por Chris Jewell Grã-Bretanha produz projetos utilizáveis ​​a preços razoáveis ​​para os clientes na França e no Reino Unido.

(0)
(0)

Comentários - 0

Sem comentários

Adicionar um comentário

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres restantes: 3000
captcha