-
Notifications
You must be signed in to change notification settings - Fork 1
/
05-themes.html
164 lines (132 loc) · 6.27 KB
/
05-themes.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
<!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 los Themes</h1>
</section>
<section>
<h2>Estructura de archivos de un tema</h2>
<li>Como ejemplo podemos mirar el tema Twenty Fifteen y toda su estructura de archivos.</li>
<li>Para saber qué archivo tiene que cargar WordPress tenemos el siguiente enlace como referencia: <a href="http://codex.wordpress.org/Template_Hierarchy">http://codex.wordpress.org/Template_Hierarchy</a>. </li>
<li>Todos los Temas deben contener como mínimo un <code>style.css</code> y un <code>index.php</code></li>
</section>
<section>
<h2>Planificando en base al diseño</h2>
<section>
<ul>
<li>Se trata más bien de algo personal pero más o menos la estructura en un archivo .psd puede estar bastante bien definida </li>
<li>Se puede hacer algo simple como <a href="http://wp-themes.com/contango/?TB_iframe=true&width=600&height=400">http://wp-themes.com/contango/?TB_iframe=true&width=600&height=400</a> donde la cabecera, pie y barra lateral están muy bien definidas</li>
<li>O algo ligeramente más complicado como <a href="http://themeforest.net/item/hoarder-responsive-wordpress-blog-theme/full_screen_preview/2919551">http://themeforest.net/item/hoarder-responsive-wordpress-blog-theme/full_screen_preview/2919551</a> donde la estructura del blog es más complicada</li>
</ul>
</section>
<section>
<ul>
<li>Hasta algo como <a href="http://crystal.wowothemes.com/home-agency/">http://crystal.wowothemes.com/home-agency/</a> muy difícil de conseguir sin un buen framework de CSS detrás. Pero incluso así sabemos dónde está la cabecera, el pie y zonas de widgets</li>
</ul>
</section>
</section>
<section>
<h2>Temas Hijo</h2>
<section>
<ul>
<li>La mejor forma de modificar un tema es usando temas hijos</li>
<li>No todos los temas están adaptados para ser padres de otros temas</li>
<li>Un tema hijo hereda todas las propiedades del tema padre</li>
<li>Para crear un tema hijo creamos una <u>carpeta nueva en wp-content/themes y un fichero CSS nuevo llamado style.css</u> con la siguiente información:</li>
</ul>
</section>
<section>
<pre><code>/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
</code></pre>
</section>
<section>
<p>Además debemos añadir la hoja de estilos CSS del Tema padre. <u>Tendremos que crear el fichero functions.php</u></p>
<pre><code><?php
add_action( 'wp_enqueue_scripts', 'fictizia_enqueue_styles' );
function fictizia_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
</code></pre>
<p>Más adelante veremos cómo funciona exactamente esta función</p>
</section>
<section>
<p>A partir de aquí podemos crear nuestras propias reglas CSS o modificar archivos del tema padre. Los archivos del tema hijo tendrán preferencia sobre los del padre.</p>
<p>La gran ventaja es que podremos actualizar el tema padre sin perder ningún cambio.</p>
</section>
<section>
<h2>Ejercicio</h2>
<p>Crea un Tema Hijo de Twenty Fifteen y cámbiale el color de fondo</p>
<p>
<a href="ejercicios/05-themes/temas-hijo/solucion.html/solucion.html">Solución</a> /
<a href="ejercicios/05-themes/temas-hijo/solucion.php/style.css">style.css</a> /
<a href="ejercicios/05-themes/temas-hijo/solucion.php/functions.php">functions.php</a>
</p>
</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>