wordpress: variación del tema

Publicada el por ernesto

instalación del tema y creación de un hijo

  1. tras seleccionar un tema nuevo,

    Apariencia > Temas > Añadir nuevo > PersonalBlogily (en este caso) > Instalar

  2. se crea un hijo a partir del mismo para evitar que, en posteriores actualizaciones del padre, se pierdan los cambios que se vayan a realizarse en el tema. para la creación del tema hijo,
    1. debe crearse un directorio propio:

      mkdir -p cuaderno/wp-content/themes/personalblogily-child

      se recomienda añadir el sufijo -child al nombre del padre.

    2. luego, es necesario crear (al menos) dos archivos:

      1. style.css

        nano cuaderno/wp-content/themes/personalblogily-child/style.css
        /*
        Theme Name: cuaderno + personalblogily
        Theme URI: https://cuaderno.poderna.com/
        Description: Adaptación del tema PersonalBlogily para cuaderno.poderna.com.
        Author: ernesto + ThemeEverest
        Author URI: https://cuaderno.poderna.com/
        Template: personalblogily
        Version: 1.0.0
        License: GNU General Public License v2 or later
        License URI: http://www.gnu.org/licenses/gpl-2.0.html
        Tags: two-columns, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-image-header, footer-widgets, featured-images, theme-options, threaded-comments, translation-ready, blog, entertainment, news
        Text Domain: personalblogily
        */

        para wordpress, el título del tema se expresa con el theme name. en cuanto al nombre del text domain debe ser igual al del padre (éste puede consultarse en cuaderno/wp-content/themes/personalblogily/style.css). por lo demás, en este archivo, se introducirán los cambios de estilo que se quieran realizar sobre el tema.

      2. functions.php

        nano cuaderno/wp-content/themes/personalblogily-child/functions.php

        a este archivo, hay que añadirle la función que se ocupa de fijar el vínculo entre padre e hijo:

        function cuaderno_tema()
{
   $padre="personalblogily-style";
   wp_enqueue_style($padre, get_template_directory_uri()."/style.css");
   wp_enqueue_style
   (
      "child-style",
      get_stylesheet_directory_uri()."/style.css",
      array($padre),
      wp_get_theme()->get("Version")
   );
}
add_action("wp_enqueue_scripts", "cuaderno_tema");

        mediante add_action, se pone a la función cuaderno_tema() a la cola de los códigos que deben ejecutarse.

      3. también puede añadirse un screenshot.png para ilustrar el tema.

      cabe decir que los archivos en la carpeta del hijo prevalecen sobre sus iguales en la carpeta del padre, esto es, sus directrices se imponen a las del padre si discurren sobre un mismo asunto.

    3. a continuación, ya se puede activar el tema hijo:

      Apariencia > Temas > cuaderno + personalblogily (declarado así en el theme name) > Activar

    4. fuente

traducción del tema

  1. en primer lugar, se crea la carpeta languages en el directorio hijo:

    mkdir -p cuaderno/wp-content/themes/personalblogily-child/languages

  2. luego, si cabe, se hace una copia de la plantilla del padre, el archivo .pot, al directorio del hijo:

    cp cuaderno/wp-content/themes/personalblogily/languages/personalblogily.pot cuaderno/wp-content/themes/personalblogily-child/languages/

    esto último cabe hacerlo, sobre todo, si se echan en falta cadenas de texto en la plantilla: en el caso de personalblogily, es necesario añadir «read more», «previous» o «next»:

    1. vía editor de texto plano (por ejemplo, gedit o nano), se añaden las siguientes líneas a personalblogily.pot:
      #: template-parts/content-none.php:65 functions.php:323
msgid "Read more"
msgstr ""

#: functions.php:56
msgid "Previous"
msgstr ""

#: functions.php:57
msgid "Next"
msgstr ""

      donde se declara la ubicación exacta de la cadena de texto (archivo:línea), la identificación de la cadena de texto (msgid) y su traducción (msgstr, pero déjese en blanco por ahora).

    2. dado que estas tres cadenas de texto no pasan por una función de traducción de wordpress, esto es, __(), es necesario modificar su declaración:
      1. «read more», tal y como se expone en los cambios propuestos para personalblogily.pot, se encuentra en template-parts/content-none.php, línea 65:
        <a href="<?php the_permalink() ?>" class="blogpost-button"><?php echo esc_html('Read more', 'personalblogily') ?></a>
      2. si se quiere pasar la cadena de texto por la función de traducción, basta con sumar __() a esc_html(): esc_html() + __() = esc_html__():
        <?php echo esc_html__('Read more', 'personalblogily') ?>
      3. una vez más, deben preservarse los cambios realizados con una copia del archivo en cuestión, template-parts/content-none.php, en el directorio del tema hijo (debe mantenerse la estructura directorio/archivo correspondiente).
      4. las cadenas de texto «previous» y «next» se encuentran en functions.php: en este caso, bastará con copiar la función personalblogily_numeric_posts_nav al archivo functions.php del hijo. una vez allí, se le aplica la función de traducción:
        'prev_text' => __("Previous", "personalblogily"),
'next_text' => __("Next", "personalblogily"),
  3. en cuanto a la traducción en sí, valga el complemento loco translate de wordpress para la labor:

    Loco Translate > Temas > cuaderno + personalblogily > Nuevo idioma

    esta aplicación se encarga de la creación de los archivos .mo y .po correspondientes: éstos deben guardarse en la carpeta languages del directorio hijo — en la medida de lo posible, deberían tener por todo nombre el prefijo local: es_ES.mo y es_ES.po.

  4. por último, hay que añadir la función que pone en danza la traducción a functions.php:
    function cuaderno_lengua()
{
   load_child_theme_textdomain("personalblogily", get_stylesheet_directory()."/languages");
}
add_action("after_setup_theme", "cuaderno_lengua");

  5. fuentes

tinymce: opciones del menú desplegable

  1. dentro de functions.php,
    function cuaderno_tinymce($initFormats)
{
   $initFormats["block_formats"]="Paragraph=p;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6";
   return $initFormats;
}
add_filter("tiny_mce_before_init", "cuaderno_tinymce");

    los formatos declarados en $initFormats[«block_formats»] serán aquellos que se muestren en el menú desplegable de tinymce; las opciones disponibles se encuentran en TinyMCE > Content Formatting:

    Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre

etiquetas de la publicación

  1. las plantillas de las publicaciones se encuentran en template-parts/content.php y template-parts/content-single.php: hay que copiar este directorio con sendos archivos a la carpeta del hijo.
  2. en los archivos en sí, content.php y content-single.php, hay que incluir la siguiente línea de código:
     <?php cuaderno_etiqueta(); ?>

    dentro de la capa cuya clase es «entry-content», preferiblemente justo antes de su cierre:

     </div><!-- .entry-content -->
  3. luego, dentro de functions.php, hay que incluir la función cuaderno_etiqueta():
    function cuaderno_etiqueta()
{
   $t=get_the_tag_list("", __(", ", "personalblogily"));
   if($t)
   {
      $e=__("Tagged", "personalblogily");
      echo <<<HTML
         <span class="tag-links"><span>{$e}</span>{$t}</span>
HTML;
   }
}

    la tarea de recuperar las etiquetas la realiza, aquí, la función get_the_tag_list de wordpress.

  4. por último, hay que añadir la cadena de texto «Tagged» a la plantilla personalblogily.pot del hijo:
    #: functions.php:37
msgid "Tagged"
msgstr ""

    y, luego, no quedará más que traducirla con loco translate.

Etiquetado como , , ,