-
Notifications
You must be signed in to change notification settings - Fork 1
/
04-conceptos-basicos.html
293 lines (255 loc) · 12.5 KB
/
04-conceptos-basicos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
65
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Curso WordPress - Fictizia</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/curso-wp.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Conceptos Básicos de WordPress</h1>
</section>
<section>
<h2>Estructura de una instalación de WordPress</h2>
<ul>
<li><strong>wp-content</strong>: Donde se guardan los Themes, Plugins y cargas de imágenes así como archivos de traducción.</li>
<li><strong>wp-admin</strong>: Sólo se carga cuando entramos en el panel de administración.</li>
<li><strong>wp-includes</strong>: Ficheros comunes tanto para el Front como para el Backend</li>
</ul>
<p>El fichero donde empieza todo: <code>index.php</code></p>
<p>El fichero que lo carga todo: <code>wp-settings.php</code></p>
</section>
<section>
<h2>Enlaces Permanentes o Permalinks</h2>
<section>
<p>Los <i>Permalinks</i> son URLs permanentes a los posts del sitio, al listado de posts por categorías, archivos, autores, etc.</p>
<p>La URL a cada post no debería cambiar, por eso son permanentes.</p>
</section>
<section>
<p>Los Permalinks por defecto son "feos"</p>
<code>http://example.com/?p=10</code>
<p><small>Carga el post con ID = 10</small></p>
</section>
<section>
<br><br>
<p>Usando el <i>mod_rewrite</i>, un módulo que suele venir por defecto en todos los servidores, podemos transformarlos en Permalinks "bonitos" llamados <i>Pretty Permalinks</i></p>
<code>http://example.com/2012/post-name/</code>
<p><small>Carga el post con <i>slug</i> post-name, publicado en el 2012</small></p>
<code>http://example.com/2012/12/30/post-name</code>
<p><small>Carga el post con <i>slug</i> post-name, publicado en el 30/12/2012</small></p>
<p>Los Permalinks se pueden ajustar en <code>Ajustes>Enlaces Permanentes</code></p>
</section>
<section>
<br><br>
<h3>El fichero .htaccess</h3>
<p>Cuando elegimos una estructura "Pretty Permalinks" WordPress genera un archivo <code>.htaccess</code> que incluye las reglas para los Permalinks y que el servidor se encarga de leer para redirigir a un sitio o a otro.</p>
<pre><code><IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
</code></pre>
</section>
</section>
<section>
<h2>Carga y parseado de URLs en WordPress</h2>
<section>
<br><br>
<p>1. Cuando un visitante escribe una URL, WordPress ejecuta unos pocos archivos de carga (<i>index.php, wp-config.php, wp-settings.php...</i>)</p>
<p>2. Carga los plugins que estén activados</p>
<p>3. Carga de los archivos de internacionalización.</p>
<p>4. Carga el archivo <i>functions.php</i> del Theme del sitio</p>
<p>5. Se instancia el objeto <i>WP_Query</i> y Se produce el parseo de la URL</p>
<p>6. Carga el fichero correspondiente de nuestro Theme</p>
</section>
<section>
<h3>Parseo de la URL</h3>
<p>A) A partir de un análisis de las variables en la URL WordPress detecta qué página/post debe cargar.</p>
<p>B) A partir del análisis, forma una query en MySQL y la ejecuta para obtener la lista de posts. Guarda el resultado en <code>$wp_query</code>.</p>
<p>C) Envía las <strong>cabeceras HTTP</strong> del Response</p>
</section>
</section>
<section>
<h2>El archivo wp-config.php</h2>
<p>Este fichero contiene toda la configuración necesaria para que WordPress arranque:</p>
<ul>
<li>Usuario/pass de la Base de Datos.</li>
<li>Salts de seguridad.</li>
<li>El prefijo de las tablas</li>
<li>Constante para hacer debug y que salgan errores (nunca utilizar en un servidor de producción)</li>
</ul>
</section>
<section>
<h2>Hooks</h2>
<section>
<br>
<p>Es la forma de extender WordPress y de modificar su comportamiento.</p>
<ul>
<li>Tocar el núcleo de WordPress no es la solución ya que cuando actualizamos perderíamos nuestro código</li>
<li>La solución pasa por extender la funcionalidad de WordPress mediante plugins o temas.</li>
</ul>
<p>Existen dos tipos primarios de Hooks:</p>
<ul>
<li><strong>Actions</strong>: Permiten ejecutar un trozo de código en cierto punto durante la carga de WordPress</li>
<li><strong>Filters</strong>: Permite manipular un valor (array, entero, cadena) en cierto punto durante la ejecución de WordPress.</li>
</ul>
</section>
<section>
<br><br>
<h3>Actions</h3>
<p>WordPress está repleto de actions y se identifican por la siguiente sintaxis:</p>
<pre><code><?php do_action( 'nombre_del_action', $parametro1, $parametro2... ); ?> </code></pre>
<p><strong>Ejemplo</strong>: wp-settings.php contiene los actions que se ejecutan al inicio de la carga: <i>plugins_loaded, setup_theme, after_setup_theme, init</i> entre otros.</p>
<p>¿Cómo usar un action?</p>
<pre><code><?php add_action( 'nombre_del_action', 'nombre_de_una_funcion_que_queremos_ejecutar', $prioridad, $num_de_argumentos ); ?> </code></pre>
</section>
<section>
<h3>Ejemplo de action</h3>
<p>Usaremos el action wp_footer, que se ejecuta en el front-end y suele hacerlo justo antes de cerrar el tag <body>. Añadiremos un mensaje en el pie de página.</p>
<pre><code><?php
add_action( 'wp_footer', 'fictizia_footer_message' );
function fictizia_footer_message() {
echo 'Esto es un mensaje que quiero poner en el pie de página';
}</code></pre>
</section>
<section>
<h3 class="alignleft">Ejercicio</h3>
<ul>
<li>Queremos que cuando WordPress se inicie, si existe un parámetro en la URL llamado <strong>'muere'</strong> y además es igual a <strong>'si'</strong>, WordPress detenga su ejecución mediante un mensaje. Recuerda que dicho parámetro se encuentra en <strong>$_GET['muere']</strong></li>
<li>Hay que utilizar el action <code>init</code> y la función <code>wp_die( 'mensaje' )</code> que acepta un parámetro $mensaje. Esta función detiene WordPress y saca por pantalla dicho mensaje.</li>
<li>Haz lo mismo usando el action <code>get_footer</code>. ¿Qué diferencia hay entre hacerlo en 'init' y 'get_footer'?</li>
</ul>
<a href="ejercicios/04-conceptos-basicos/actions/solucion.html">Solución</a> /
<a href="ejercicios/04-conceptos-basicos/actions/solucion.php">Archivo PHP</a>
</section>
<section>
<h3>Actions comunes</h3>
<ul>
<li>plugins_loaded</li>
<li>init</li>
<li>admin_menu</li>
<li>template_redirect</li>
<li>wp_head</li>
</ul>
</section>
<section>
<h3>Filters</h3>
<ul>
<li>Ayudan a manipular valores durante la ejecución del núcleo de WordPress.</li>
<li>Se identifican por la siguiente sintaxis:</li>
</ul>
<pre><code><?php $nuevo_valor = apply_filters( 'nombre_del_filter', $valor ); ?></code></pre>
</section>
<section>
<h3>Ejemplo de filter</h3>
<p>wp_title es el filtro responsable del valor de <title> en la cabecera de nuestra página. Podemos pasar a nuestra función hasta 3 parámetros.</p>
<p>La definición es la siguiente:</p>
<pre><code><?php $title = apply_filters( 'wp_title', $title, $sep, $seplocation ); ?<</code></pre>
</section>
<section>
<h3>Ejemplo de filter</h3>
<p>Para modificar dicho título:</p>
<pre><code>
add_filter( 'wp_title', 'fictizia_modifica_titulo', 10, 3 );
function fictizia_modifica_titulo( $titulo, $sep, $seplocation ) {
$name = get_bloginfo( 'name' );
$titulo .= $sep . ' ' . $name;
return $titulo;
}
</code></pre>
</section>
<section>
<h3 class="alignleft">Ejercicio</h3>
<p><code>show_admin_bar</code> es un filtro que permite mostrar u ocultar la barra superior de administración mientras estamos en el frontend (no en la zona de administración) Vamos a quitarla.</p>
<p>La definición es <code>$show_admin_bar = apply_filters( 'show_admin_bar', $show_admin_bar );</code> donde <code>$show_admin_bar</code> es un valor booleano (true para mostrarla y false para quitarla)</p>
<ul>
<li>Haz desaparecer dicha barra.</li>
</ul>
<p>
<a href="ejercicios/04-conceptos-basicos/filters/solucion.html">Solución</a> /
<a href="ejercicios/04-conceptos-basicos/filters/solucion.php">Archivo PHP</a>
</p>
</section>
</section>
<section>
<h2>Internacionalización</h2>
<section>
<p>Para que nuestro tema o plugin sea traducible a otros idiomas no podemos hacer esto:</p>
<pre><code><div>
<p><?php echo 'Esto es un párrafo'; ?></p>
<p>Esto es otro párrafo</p>
</div></code></pre>
<p>WordPress no sabe que esas sentencias son traducibles y las sacará tal cual en cualquier idioma.</p>
<p>Para ello hay que hacer uso de las funciones de internacionalización</p>
</section>
<section>
<h3>Funciones de Internacionalización</h3>
<ul>
<li><code>__( $cadena, $dominio )</code>: Devuelve la cadena traducida si el paquete de idiomas se ha encontrado.</li>
<li><code>_e( $cadena, $dominio)</code>: Saca por pantalla la cadena traducida si se ha encontrado el paquete de idiomas</li>
<li><code>_e( $cadena, $dominio )</code> es lo mismo que <code>echo __( $cadena, $dominio )</code></li>
</ul>
</section>
<section>
<ul>
<li>Hay que acostumbrarse a <u>usar permanentemente estas funciones</u> cada vez que se quiera sacar algo por pantalla. Pero no todo vale: el contenido de los posts o los títulos no hay que pasarlos por las funciones ya que el contenido del blog es distinto en cada instalación</li>
<li>Sólo hay que <u>utilizarlas para aquello que no varíe</u> en nuestro tema/plugin de una instalación a otra.</li>
<li>Más adelante veremos cómo usarlas y cómo crear nuestro paquete de idiomas en un tema.</li>
</ul>
</section>
</section>
</div>
<div class="header">
<a href="index.html">Índice</a>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
Reveal.configure({ slideNumber: 'c / t' });
</script>
</body>
</html>