Espacio de aprendizaje sobre Comunicación Digital
Date:octubre 19, 2013

Insertar html en entradas y post

Para insertar html completo en un post o entrada tenemos varias opciones disponibles que serán útiles en función de lo que necesitemos hacer.

  • Plugin Artiss Code Embed

    Cuándo:

    • Este método es adecuado para que lo utilice el perfil “administrador”.
    • Es útil cuando se quiere controlar la inclusión de código embebido desde la administración.
    • Permite convertir cualquier fragmento de código (html, css…) en un snippet (fragmento de código reutilizable) que puede ser invocado o instanciado en diferentes publicaciones de la web (páginas, entradas, widgets) mediante un shortcode único que se genera para cada snippe.

    Cómo:

  • Función-librería

    Cuándo:

    • Cuando queramos incluir gráficos estáticos.
    • Hemos incluido una función que carga las librerías de Google Chart.

    Cómo:

    • Para llamar a la librería se utiliza el siguiente shortcode:
    [chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]
  • Plugin RAW HTML

    Cuándo:

    • Este método es adecuado para que lo utilicen los perfiles “colaborador”, “autor” o “editor” en sus reportajes o artículos individuales.
    • No es útil cuando se quiere reutilizar un snippet (o fragmento de código) para varios artículos.
    • Este método es exclusivo. Es decir, que cuando utilicemos esta opción no podremos incluir simultáneamente ninguna de las anteriores.

    Cómo:

    1. Para incluir el código debe utilizarse el editor HTML “Texto”.

    2. Localizar el punto donde queramos incluir el código html

      1. Escribir la etiqueta: <!–start_raw–>

      2. Pegar el código que queremos incluir seguido

      3. Finalizar incluyendo la etiqueta: <!–end_raw–>

    • Ejemplo para visualizar un Google Chart:
    <!--start_raw-->

    <!– You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) –><meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />Google Visualization API Sample<script type=”text/javascript” src=”http://www.google.com/jsapi”></script><script type=”text/javascript”>// <![CDATA[

    google.load(‘visualization’, ‘1’, {packages: [‘geochart’]});     function drawVisualization() {       var data = google.visualization.arrayToDataTable([         [‘Country’, ‘Popularity’],         [‘Germany’, 200],         [‘United States’, 300],         [‘Brazil’, 400],         [‘Canada’, 500],         [‘France’, 600],         [‘RU’, 700]       ]);       var geochart = new google.visualization.GeoChart(           document.getElementById(‘visualization’));       geochart.draw(data, {width: 556, height: 347});     }     google.setOnLoadCallback(drawVisualization);

    // ]]></script>

    <div id=”visualization”></div>

    ​ <!–end_raw–>

  • Plugin ZYX HTML – Snippets

    Cuándo:

    • Este método es adecuado para que lo utilice el perfil “administrador”.
    • Es útil cuando se quiere controlar la inclusión de código embebido desde la administración.
    • Permite convertir cualquier fragmento de código (html, css…) en un snippet (fragmento de código reutilizable) que puede ser invocado o instanciado en diferentes publicaciones de la web (páginas, entradas, widgets) mediante un shortcode único que se genera para cada snippe.

    Cómo:

    1. En primer lugar debe crearse el snippet. Para ello, en el escritorio buscaremos el enlace XYZ Html, y seleccionaremos la opción “Add New HTML Snippet”. Incluiremos el código que deseemos en el editor para que genere el Short Code.
    2. Copiaremos el Short Code y abriremos el lugar (entrada, página o widget) en el que queramos incorporarlo. Pegaremos el shortcode donde corresponda y guardamos.

gertrudix

Lecturer and Researcher on Digital Communication (Ciberimaginario - Rey Juan Carlos University - ICONO14)

Latest posts by gertrudix (see all)