Cómo editar el footer the un post en un theme hecho con Underscores.me

Nivel: intermedio

Si estás desarrollando un tema basado en Underscores seguramente quieras editar el look del footer en un post. Si te fijás en donde deberías editar te vas a encontrar con:

<footer class="entry-footer">
    <?php _s_entry_footer(); ?>
</footer><!-- .entry-footer -->

Pero cómo editamos ésto???? A dónde está
Tenés que buscar adentro de tu theme en la carpeta inc/template-tags..

Sitio web de una fotógrafa

Éste es un sitio web protegido con contraseña.

El objetivo fué crear un portfólio tipo catálogo en donde ella pudiera exhibir su obra. La consigna fué que fuera simple y minimalista, elegante y moderno y que tuviera blanco para destacar sus fotografías.

El website fué implementado en plataforma WordPress y el tema o template lo diseñé y programé a medida ajustándome a lo que le había propuesto en el boceto que era implementar esta grilla que permite al visitante tener un pantallaso general de su obra. a medida para ella.

El desafío en su momento fué como distribuir las imágenes en la grilla de forma armónica porque tienen todas diferente medida.

Implementé una grilla de tipo Masonry. Masonry es una librería armada con Java Script que permite  ordenar sus elementos de forma consecutiva en una grilla o cuadrícula sin importar cual sea el alto de sus imágenes  y respetando el mismo margen . Es el sistema que se puso de moda con Pinterest y es ideal para crear galerías de imágenes que no tengan un tamaño estandard.

Al hacer click en cualquiera de las imagenes en miniatura se inicializa la galería a pantalla completa con un fondo negro para apreciar mejor las imagenes y un efecto de inercia delicado al pasar las fotos.

 

Click on las imagenes para verlas a tamaño completo

 

Como mostrar una imagen que se sube a traves de “ACF” en nuestro template

Así se llama a los ACF que creamos:

                                     <?php
                                          $resource_image      = get_field('resource_image');
                                          $resource_url      = get_field('resource_url');
                                    $button_text      = get_field('button_text');      
                                    ?>

Y así se muestra en el front end:

 <img src="<?php echo $resource_image[url]; ?>" alt="<?php echo $resource_image[alt]; ?>">

Un ejemplo completo sería:

                               <?php while ( have_posts() ) : the_post(); ?>
                              
                                    <?php the_content(); ?>
                              
                              <?php endwhile; // end of the loop ?>
                              
                              <!-- esto es lo que quiero que muestre en el loop -->
                              <?php $query = new WP_Query( array( 'category_name' => 'general' ) ); ?>
                              <!-------------------------------------------------->
                                    
                                    <?php while( $query->have_posts() ) : $query->the_post(); ?>
                                    
                                    <?php
                                          $resource_image      = get_field('resource_image');
                                          $resource_url      = get_field('resource_url');
                                          $button_text      = get_field('button_text');      
                                    ?>
                                    
                                    <div class="col-md-4 resource"> <!--aca muestra como se ve cada CPT por unidad -->

                                          <img src="<?php echo $resource_image[url]; ?>" alt="<?php echo $resource_image[alt]; ?>">
                                          
                                          <?php the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); ?>

                                          <h3><?php the_title(); ?></h3>
                                          <?php the_excerpt(); ?>
                                  
                                          <?php if( !empty($button_text) ) : ?>
                                          <a href="<?php echo $resource_url; ?>" class="verweb"><?php echo $button_text; ?></a>
                                          <?php endif; ?>
                                    </div><!-- col-md-4 -->
                                    
                                    <?php endwhile; ?>

Si lo que querés es que se muestre en el frontend la “Featured Image” entonces solo hay que usar:

 <?php the_post_thumbnail(); ?>

Más info sobre the_post_thumbnail: https://developer.wordpress.org/reference/functions/the_post_thumbnail/

Titulo con hipervínculo en php

Dos formas de usar the_title.
La primera es la básica:

                         <h3><?php the_title(); ?></h3>

Lo que pasa en que no tiene hipervínculo. En mi caso estaba armando un template para mostrar los artículos de una determinada categoría en forma de grilla y cuando lo implementé vi que me mostraba los artículos en forma de grilla com quería, cada uno con thumbnail image, título y extracto pero no podía clickear en ningún lado para acceder al artículo completo.
Hay una solución para esto. El código se escribe de una forma diferente: en vez de poner los html tags envolviendo al código PHP, lo hacemos alrevés.

 <?php the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); ?>

Si tu negocio provee un servicio implementá este tip para lograr empatía con tus potenciales clientes

Prestá mucha atención a la naturalidad con la que Natalie habla y la cercanía. Ella se pone en el lugar del cliente porque ella estuvo en ése lugar.

Ella habla del problema de incontinencia que les ocurre a las mujeres que han sido mamás.

Llegué a este website a través de un anuncio que ví en Facebook adds. La posibilidad que el el video nos da de poder conocer a la persona que quizas contratemos no tiene precio. Escucha atentamente el tono de voz que usa. Nunca me aburrí de escucharla porque no me está hablando como si me quisiera vender algo, me habla como una amiga que me está dando un consejo. Su sonrisa es genuina, sus experiencias son reales, me da información técnica digerida en una forma clara que puedo entender sin saber del tema.

Éste es el aviso que vi en Facebook que me llevó a éste sitio web.

 

 

Como remover el subrayado de un link

(remove underline link css)

Con la propiedad “text-decoration”. Text-decoration tiene dos opciones: “none” si queremos el link sin subrayado y “underline” si lo queremos subrayado.

Además, podemos darle un estilo a nuestros links dependiendo del estado en el que estén. Los estados de los links son:

link: para un link normal que todavía no fue visitdado (el visitante no hizo click en él)

visited: es un link que ya fué visitado.

hover: Como se ve cuando pasamos el mouse por encima de el link.

active: se refiere al link como se ve en el momento en que hacen click. También por ejemplo podemos ver éste efecto en un menú cuando estamos en la página que se corresponde al link. Por ejemplo, estamos en la págin “contacto” entonces el link del menú principal que dice “contacto” se muestra con el estilo que le dimos al link en el estado “active”

The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked

Cuando estamos definiendo los estilos para diferentes estados de un link tenemos que tener en cuenta estas reglas:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

 

 

Copiar y pegar información sin formato de texto o remover el formato de texto en su defecto

Cómo remover el formato de texto cuando copio y pego información de un archivo de un procesador de texto a una entrada en WordPress?
Si te pasa que el texto cuando lo pegaste en un nuevo post o entrada, copió también la información de la fuente que estabas usando en el procesador de texto, seleccioná el texto nuevamente, copialo (el atajo es Ctrl C para PC y Command Cpara Mac) y volvé a pegarlo en la caja de texto pero en la pestaña que dice HTML (es la que está marcada con la flecha roja en la captura de pantalla). En algunas plantillas dice “Visual/HTML” en otras dice “Visual/Text”.

Una vez pegado el texto en la caja ahora sí podés volver al modo “Visual” y ajustar formatos de títulos negritas y demás.

Espero te ayude.
remover-formato-de-texto

Y aquí les dejo una nota que encontré buscando en Google, que complementa ésta información si directamente quieren pegar el texto sin formato, para los que usan word.

Eliminar formatos al pegar texto en Word