-
Notifications
You must be signed in to change notification settings - Fork 1
/
03-intro-a-wp.html
336 lines (291 loc) · 13.8 KB
/
03-intro-a-wp.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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!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>Introducción a WordPress y MySQL</h1>
</section>
<section>
<p><strong>W</strong>ord<strong>P</strong>ress</p> no es wordpress ni Wordpress.
<img src="img/logo-comparison.png" alt="">
</section>
<section>
<h2>WordPress Codex</h2>
<p>Es el recurso principal para desarrolladores. En él encontramos referencias de muchas de las funciones, filtros, acciones y guías de desarrollo. </p>
<a href="http://codex.wordpress.org/">http://codex.wordpress.org/</a>
</section>
<section>
<h2>Instalación y configuración de WordPress</h2>
<section>
<ul>
<li>Herramienta que usaremos: MAMP. MAMP instala un servidor local de desarrollo.</li>
<li>Incluye los siguientes módulos:</li>
</ul>
<img src="img/apache.png" alt="">
<img src="img/mysql.png" alt="">
<img src="img/php.png" alt="">
</section>
<section>
<p>Antes de empezar tenemos que descargar WordPress en nuestro servidor local (carpeta wordpress, por ejemplo)</p>
<ol>
<li>Arrancamos MAMP y los servidores. Con esto activamos todo el entorno.</li>
<li>Creamos una Base de Datos para nuestra instalación: localhost:8888/phpMyAdmin</li>
<li>Iniciamos la instalación de WordPress: localhost:8888/wordpress</li>
</ol>
</section>
<section>
<br><br>
<h3>La Base de Datos de WordPress</h3>
<ul>
<li><strong>wp_posts, wp_postmeta</strong>: Guarda la información de todos los posts y sus metadatos.</li>
<li><strong>wp_comments y wp_commentmeta</strong>: Guarda la información de todos los comentarios y sus metadatos.</li>
<li><strong>wp_users y wp_usermeta</strong>: Guarda la información de los usuarios y sus metadatos.</li>
</ul>
</section>
<section>
<br><br><br>
<ul>
<li><strong>wp_links</strong>: En desuso. Guarda la información sobre el listado de links. Se mantiene por retrocompatibilidad.</li>
<li><strong>wp_terms, wp_terms_taxonomy, wp_terms_relationships</strong>: Guarda toda la información sobre taxonomías (pueden ser las que vienen por defecto como categorías y etiquetas o taxonomías propias), sus relaciones con los posts y los términos de dichas taxonomías.</li>
<li><strong>wp_options</strong>: Guarda toda la información necesaria de configuración. Los temas y plugins suelen guardar información en esta tabla.</li>
</ul>
</section>
<section>
<br><br>
<ul>
<li>WordPress es un sistema basado en Base de Datos: <strong>PRÁCTICAMENTE TODA LA INFORMACIÓN</strong> se encuentra en ella</li>
<li>Cualquier cosa que deba ser persistente en el tiempo debemos guardarla en las tablas que más se ajusten a dicho tipo de información (wp_options para los temas normalmente y tablas propias para los plugins).</li>
</ul>
</section>
</section>
<section>
<section>
<h2>Un momento, ¿Qué es una tabla?</h2>
<p>Una colección de datos con una estructura definida. Las columnas se llaman campos y las filas, registros</p>
</section>
<section>
<h2>Un momento, ¿Qué es una tabla?</h2>
<p>Ya, ahá, entonces ¿Qué es una tabla? Lo vemos con un ejemplo.</p>
<img src="img/tabla0201.jpg" alt="">
</section>
<section>
<h3>Creación de una tabla</h3>
<pre><code>
CREATE TABLE `interpretes` (
`id_interprete` int(10) NOT NULL AUTO_INCREMENT,
`apellidos` varchar(200) NOT NULL,
`nombre` varchar(200) NOT NULL,
`nacionalidad` varchar(200) NOT NULL,
PRIMARY KEY (`id_interprete`)
);
</code></pre>
</section>
<section>
<h3>Insertar datos en una tabla</h3>
<pre><code>INSERT INTO interpretes
(apellidos, nombre, nacionalidad)
VALUES
('Cruz', 'Ignacio', 'España' );
// También inserciones múltiples
INSERT INTO interpretes
(apellidos, nombre, nacionalidad)
VALUES
('Kubrick', 'Stanley', 'EEUU' ),
('Hitchcock', 'Alfred', 'Reino Unido' );
</code></pre>
</section>
<section>
<br><br>
<h3>Seleccionar datos de una tabla</h3>
<pre><code>
// Selecciona todas las filas con todos los campos
SELECT * FROM interpretes;
// Selecciona todos los apellidos de la tabla
SELECT apellidos FROM interpretes;
// Selecciona sólo dos apellidos de la tabla
SELECT apellidos FROM interpretes LIMIT 2;
// Selecciona los apellidos que sean Cruz (No hace distinción de mayúsculas)
SELECT apellidos FROM interpretes WHERE apellidos = 'cruz';
// Selecciona los intérpretes cuyos apellidos contengan “u”
SELECT * FROM interpretes WHERE apellidos LIKE '%u%';
</code></pre>
</section>
<section>
<br><br>
<h3>Actualizando datos de una tabla</h3>
<pre><code>
// Actualiza mis apellidos
UPDATE interpretes SET apellidos = 'Cruz Moreno' WHERE apellidos = 'Cruz';
</code></pre>
</section>
<section>
<h3>Borrando datos de una tabla</h3>
<pre><code>
// Me borran de la tabla :(
DELETE FROM interpretes WHERE nombre = 'Ignacio';
// Borrado de toda la tabla
DELETE FROM interpretes;
// Tirando la tabla a la basura
DROP TABLE interpretes;
</code></pre>
</section>
</section>
<section>
<h2>Un vistazo a la tabla wp_posts</h2>
<section>
<p>La tabla <code>wp_posts</code> es donde WordPress guarda toda la información relativa a los posts, páginas y tipos de posts personalizados en el sitio. Cada post tiene una ID propia, además de tener asociado un ID de usuario (su autor).</p>
<p>Un post en WordPress tiene distintos campos que le definen: ID, autor, fecha de creación, fecha de modificación, contenido, título, extracto...</p>
</section>
<section>
<ul>
<li><strong>ID</strong>: Número de identificación del post</li>
<li><strong>post_author</strong>: ID del usuario que ha creado dicho post (la información de dicho usuario se guarda en wp_users)</li>
<li><strong>post_date</strong>, post_date_gmt: Fechas de creación del post</li>
<li><strong>post_content</strong>, post_title, post_excerpt: Contenido, título y extracto del post.</li>
<li><strong>comment_status</strong>, ping_status (open/close): Si el post admite comentarios o pings o no.</li>
<li><strong>post_password</strong>: Contraseña si el post es privado.</li>
<li><strong>post_name</strong>: Identificador único alfanumérico del post. También llamado slug.</li>
</ul>
</section>
<section>
<br><br>
<ul>
<li><strong>post_modified</strong>, post_modified_gmt: Fechas de la última modificación del post.</li>
<li><strong>post_parent</strong>: ID del post padre. Los posts no son jerárquicos pero las páginas sí.</li>
<li><strong>Guid</strong>: URL del post.</li>
<li><strong>menu_order</strong>: Útil para tipos de posts jerárquicos como las páginas.</li>
<li><strong>post_type</strong>: Tipo de post. Los básicos son post, page, attachment, revision, nav_menu_item pero veremos cómo se pueden crear más tipos.</li>
<li><strong>post_mime_type</strong>: Sólo para tipos de post attachment, puede ser image/jpg, image/png, video/mp4...</li>
<li><strong>comment_count</strong>: Número de comentarios del post.</li>
</ul>
</section>
</section>
<section class="alignleft">
<h2>Ejercicio</h2>
<section>
<p class="alignleft">Inserta un nuevo post en la tabla wp_posts</p>
<ul>
<li>Contenido: Mi contenido no es gran cosa</li>
<li>Título: Estamos de curso</li>
<li>ID del autor: 1</li>
</ul>
<p class="alignleft">Selecciona todas las filas de wp_posts.</p>
<p class="alignleft">Selecciona mediante una claúsula WHERE sólo el post que hemos creado.</p>
</section>
<section>
<p class="alignleft">Ahora inserta en la tabla wp_postmeta un nuevo metadato para dicho post:</p>
<ul>
<li>meta_key: 'mi_metadato'</li>
<li>meta_value: 'Mi valor'</li>
<li>post_id: La ID del post creado.</li>
</ul>
<p><a href="ejercicios/03-intro-a-wp/mysql/solucion.html">Solución</a></p>
</section>
</section>
<section>
<h3>El Panel de administración de WordPress</h3>
<section>
<p>Para acceder a la zona de administración debemos ir a <code>[Nuestra URL]/wp-admin</code>. (En nuestro caso <code>localhost:8888/wordpress/wp-admin)</code></p>
<ul>
<li>Lo primero que vemos es el Escritorio (o Dashboard), una zona-resumen donde también podemos escribir posts rápidos o leer las últimas noticias del universo WP.</li>
<li>En <code>Ajustes>Generales</code> vemos toda la configuración básica de WP.</li>
<li>En <code>Ajustes>Escritura</code> tenemos las opciones de publicación por defecto.</li>
</ul>
</section>
<section>
<ul>
<li>En <code>Ajustes>Lectura</code>, la configuración básica de cómo se verá nuestro sitio.</li>
<li>En <code>Ajustes>Comentarios</code> todo lo relativo a los comentarios.</li>
<li>En <code>Ajustes>Medios</code> podemos configurar el tamaño de las distintas imágenes.</li>
<li>En <code>Ajustes>Enlaces</code> Permanentes podemos cambiar el aspecto de las URLs.</li>
</ul>
</section>
<section>
<ul>
<li>En <code>Apariencia>Temas</code>, Personalizar, Fondo y Cabecera podremos cambiar el aspecto de nuestra web cambiando o instalando temas nuevos.</li>
<li>En <code>Apariencia>Widgets</code> podremos organizar la disposición y configuración de loswidgets en pantalla.</li>
<li>En <code>Apariencia>Menus</code> podemos agregar nuevos menús, asignarlos a una barra de menú, etc.</li>
</ul>
</section>
<section>
<ul>
<li>En <code>Plugins</code> podremos extender la funcionalidad de nuestra web instalando nuevos plugins y activándolos/desactivándolos.</li>
<li>En <code>Entradas, Páginas, Medios y Comentarios</code> es donde gestionaremos el contenido de nuestra web. Desde aquí subiremos archivos, crearemos posts y páginas y gestionaremos los comentarios. – En Usuarios podremos gestionar todos los usuarios registrados en la web así como los permisos que disponen.</li>
<li>En <code>Herramientas</code>, por defecto podremos importar contenido.</li>
</ul>
</section>
</section>
<section>
<h3>Ejercicio</h3>
<section>
Vamos a crear 4 páginas nuevas: Blog, Inicio, Mi Perfil y Contacto. Para ello vamos a usar el tema Twenty Fourteen.
<ul>
<li>En Blog vamos a mostrar todas las entradas de nuestro blog e Inicio será la página principal del sitio.</li>
<li>En mi perfil usaremos una plantilla para mostrar nuestro perfil.</li>
<li>En Contacto usaremos una plantilla de ancho completo.</li>
</ul>
</section>
<section>
<ul>
<li>Crea ahora un menú donde aparezcan Blog e Inicio y Contacto debajo de Mi Perfil.</li>
<li>Escribe un nuevo post con una imagen centrada y otra a la derecha.</li>
<li>Usa el importador de WordPress en Herramientas para importar el contenido del archivo <a href="https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml">https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml</a></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>