Bienvenido al día 2 de 3 de nuestra serie sobre cómo agregar estilos personalizados a los formatos de publicación de blog de Divi. Por defecto, Divi viene con seis formatos de publicación de blog: Estándar, Video, Audio, Cita, Galería y Enlace. En esta serie te enseñamos a personalizarlos con php y css.
Ayer, le mostré cómo usar Desktopserver para crear una instalación local de WordPress. También te mostré cómo configurar un tema hijo . Ambos son una gran base para cualquier proyecto en el que esté trabajando y es perfecto para lo que haremos hoy y mañana.
Hoy vamos a editar un código PHP dentro del archivo single.php de Divi para obtener un diseño completamente único para los formatos de publicación de su blog. Si aún no está familiarizado con PHP, no se preocupe. No es mucho y no es difícil de hacer. Te explicaré exactamente qué código necesitas y dónde ponerlo.
Después de editar nuestro archivo single.php, finalmente estaremos listos para nuestra última parte de nuestra serie. Mañana se trata de diseñar y descubrir qué tan geniales pueden verse los formatos de publicaciones de blog en su blog.
Empecemos.
Esto es lo que deberá seguir junto con el tutorial de hoy:
- Un editor de código como Atom, Sublime, Brackets o Notepad++ (lo que prefieras)
- Una instalación local de WordPress (última versión) usando DesktopServer (a menos que ya tenga uno)
- Un tema Divi Child instalado y activo con tres archivos agregados de la publicación de ayer (style.css, functions.php y single.php)
Personalización de la plantilla Single.php de Divi
Agregar una nueva sección de héroe
Usando su editor de texto, abra el archivo single.php de su tema hijo. Asegúrate de haber copiado todo el código single.php del tema principal (Divi) con tu archivo.
En la parte superior del archivo, busque el div de apertura con el id «contenido principal».
|
01
|
<div id=”main-content”> |
Luego ingrese lo siguiente justo debajo del div de apertura de «contenido principal»:
|
01
02
03
04
05
06
07
08
09
|
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?> <div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');"> <h1 class="entry-title"><?php the_title(); ?></h1> <?php et_divi_post_meta(); ?> </div> |
Esto es lo que este código le está haciendo a su archivo single.php.
Primero, a una variable llamada “$featured_image_src” se le asigna un valor que “obtiene” la fuente de la imagen (que es la URL de la imagen) para la imagen destacada asignada a la publicación.
El siguiente código es una combinación de html y php que abre el nuevo div con una clase personalizada llamada «sección de héroe» y algunos estilos en línea para crear dos imágenes de fondo apiladas una encima de la otra.
La primera imagen se define como un degradado lineal que sirve como superposición oscura para la imagen destacada.
|
01
|
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3)) |
Y la segunda imagen (la imagen destacada) está separada por una coma y, de manera predeterminada, se apila detrás de la primera imagen.
|
01
|
url('<?php printf ($featured_image_src[0])?>') |
La variable de aviso definida anteriormente se usa para establecer la imagen destacada como fondo de la «sección de héroe».
Debido a que la segunda imagen de la lista se apila automáticamente detrás de la primera imagen, esta combinación crea la superposición oscura sobre la imagen de la sección principal.
Ahora, cada vez que agregue una imagen destacada a su publicación, se aplicará automáticamente una superposición oscura.
El siguiente fragmento de código agrega el título de su publicación dentro de su nuevo div de sección de héroe.
|
01
|
<h1 class="entry-title"><?php the_title(); ?></h1> |
El fragmento final de código agrega el metacontenido de la publicación debajo del título y dentro del div de la sección principal.
|
01
|
<?php et_divi_post_meta(); ?> |
Esto es lo que esta nueva sección y estilo nos permitirá lograr en la publicación de mañana:
Sacar lo que no necesitas
Como tiene una nueva sección para la imagen destacada, el título de la publicación y la meta de la publicación, debe eliminar tres secciones de código que se estaban utilizando para mostrar su imagen destacada, el título de la publicación y la meta de la publicación de forma predeterminada.
Deberá quitar la etiqueta h1 que muestra el título de la publicación:
|
01
|
<h1 class="entry-title"><?php the_title(); ?></h1> |
Tendrás que sacar el código que muestra el meta de la publicación:
|
01
|
<?php et_divi_post_meta(); ?> |
Y deberá sacar el código y mostrar la miniatura de la imagen destacada:
|
01
|
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height ); |
Aquí está el código completo para el nuevo archivo single.php. Siéntete libre de copiarlo y pegarlo si te quedas atascado.
Nota: este es un cuadro de desplazamiento de código. Deberá seleccionar y arrastrar para obtenerlo todo.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<?phpget_header();$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );?><div id="main-content"><?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?> <div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');"> <h1 class="entry-title"><?php the_title(); ?></h1> <?php et_divi_post_meta(); ?> </div> <div class="container"> <div id="content-area" class="clearfix"> <div id="left-area"> <?php while ( have_posts() ) : the_post(); ?> <?php if (et_get_option('divi_integration_single_top') <> '' && et_get_option('divi_integrate_singletop_enable') == 'on') echo(et_get_option('divi_integration_single_top')); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>> <?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?> <div class="et_post_meta_wrapper"> <!-- h1 was here --> <?php if ( ! post_password_required() ) : //et_divi_post_meta(); $thumb = ''; $width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 ); $height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 ); $classtext = 'et_featured_image'; $titletext = get_the_title(); $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' ); $thumb = $thumbnail["thumb"]; $post_format = et_pb_post_format(); if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) { printf( '<div class="et_main_video_container"> %1$s </div>', $first_video ); } else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) { } else if ( 'gallery' === $post_format ) { et_pb_gallery_images(); } ?> <?php $text_color_class = et_divi_get_post_text_color(); $inline_style = et_divi_get_post_bg_inline_style(); switch ( $post_format ) { case 'audio' : printf( '<div class="et_audio_content%1$s"%2$s> %3$s </div>', esc_attr( $text_color_class ), $inline_style, et_pb_get_audio_player() ); break; case 'quote' : printf( '<div class="et_quote_content%2$s"%3$s> %1$s </div> <!-- .et_quote_content -->', et_get_blockquote_in_content(), esc_attr( $text_color_class ), $inline_style ); break; case 'link' : printf( '<div class="et_link_content%3$s"%4$s> <a href="%1$s" class="et_link_main_url">%2$s</a> </div> <!-- .et_link_content -->', esc_url( et_get_link_url() ), esc_html( et_get_link_url() ), esc_attr( $text_color_class ), $inline_style ); break; } endif; ?> </div> <!-- .et_post_meta_wrapper --> <?php } ?> <div class="entry-content"> <?php do_action( 'et_before_content' ); the_content(); wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) ); ?> </div> <!-- .entry-content --> <div class="et_post_meta_wrapper"> <?php if ( et_get_option('divi_468_enable') == 'on' ){ echo '<div class="et-single-post-ad">'; if ( et_get_option('divi_468_adsense') <> '' ) echo( et_get_option('divi_468_adsense') ); else { ?> <a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a> <?php } echo '</div> <!-- .et-single-post-ad -->'; } ?> <?php if (et_get_option('divi_integration_single_bottom') <> '' && et_get_option('divi_integrate_singlebottom_enable') == 'on') echo(et_get_option('divi_integration_single_bottom')); ?> <?php if ( ( comments_open() || get_comments_number() ) && 'on' == et_get_option( 'divi_show_postcomments', 'on' ) ) { comments_template( '', true ); } ?> </div> <!-- .et_post_meta_wrapper --> </article> <!-- .et_pb_post --> <?php endwhile; ?> </div> <!-- #left-area --> <?php get_sidebar(); ?> </div> <!-- #content-area --> </div> <!-- .container --></div> <!-- #main-content --><?php get_footer(); ?> |
¡Es todo por hoy!
Ahora todo el trabajo duro está hecho y el marco está listo para que agreguemos nuestro estilo a nuestros formatos de publicación. Mañana configuraré y diseñaré los 6 formatos de publicaciones de blog usando la plantilla single.php que acabamos de crear.
Publique sus comentarios a continuación y haré todo lo posible para solucionar cualquier problema que pueda tener. Si es posible, asegúrese de tener una instalación nueva de la última versión de WordPress y Divi para evitar posibles conflictos.
¡Hasta mañana!