�ݺ�ߣ

Perché odio
i temi di WordPress
di MATTEO CAVUCCI

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013
@WORDCAMPBOLOGNA # WPCAMPBO13

lunedì 11 febbraio 13

È bello lavorare con
Wordpress


Perché è...


Perché è...

• Intuitivo


Perché è...

• Intuitivo
• Ben documentato


Perché è...

• Intuitivo
• Ben documentato
• Supportato dalla community


Drupal Joomla Wordpress Altri

fonte: w3tech.com


Drupal Joomla Wordpress Altri

Drupal
7% Joomla
Altri
27% 9%

Wordpress
57%

fonte: w3tech.com


Anche i clienti
amano WordPress


Perché è...

• Facile


Perché è...

• Facile
• Diffuso


Perché è...

• Facile
• Diffuso
• Conveniente


Strumenti specializzati utili agli
obiettivi di comunicazione
del progetto


Prodotti che sono...



• Efﬁcaci



• Efﬁcaci
• Flessibili



• Efﬁcaci
• Flessibili
• Economici


Questo è il mio
problema.


Matteo Cavucci

• 30 anni
• Developer
• Front-end


• Studio di progettazione
• Roma
• Enti&aziende

mced.it


Nessuno è ancorato al proprio ruolo.

Non reinventare
la ruota.


• Cerca un theme
(e cerca di capire se è buono...)


• Cerca un theme

• Decodiﬁca


• Cerca un theme

• Decodiﬁca
• Customizza


Adattare il
contenuto al thema


Framework themes


Gli svantaggi


Gli svantaggi

• Costano


200
US$ 197,00
US$ 174,00
150 US$ 164,00

US$ 127,00
100

50 US$ 59,95

0
Pagelines Thesis Genesis Headway Catalyst


Gli svantaggi

• Costano
• Curva di apprendimento ripida


Genesis

add_action( 'genesis_meta',
'load_fonts', 5);
function load_fonts() {
echo '<link rel="stylesheet"
type="text/css" href="http://
fonts.googleapis.com/css?
family=Lora|Oswald"
media="screen">';
}


Genesis WordPress

add_action( 'genesis_meta',

'load_fonts', 5);
wp_register_style('googleFonts',
'http://fonts.googleapis.com/css?
echo '<link rel="stylesheet"
family=Lora|Oswald');
type="text/css" href="http://

fonts.googleapis.com/css?
wp_enqueue_style( 'googleFonts');
family=Lora|Oswald"
}
media="screen">';
add_action('wp_print_styles',
}
'load_fonts');


Gli svantaggi

• Costano
• Curva di apprendimento ripida
• Un sacco di roba inutile


Framework PageSize
iThemes (Builder) 299kb

Headway 1.1 mb

Genesis 1.1 mb

Catalyst (w/Dynamik) 1.6 mb

WooThemes (Canvas) 1.7 mb

Ultimatum 1.8 mb

Pagelines 5.2 mb


Framework LoadTime
Headway 226 ms

964 ms
Genesis

992 ms
WooThemes (Canvas)

1.2 s
Catalyst (w/Dynamik)

1.22 s
Ultimatum

1.26 s
iThemes (Builder)

Pagelines 5.18 s


Un altro livello di complessità
tra il progetto e WordPress


Ecco perché
io odio i themi di
WordPress


Ripartiamo!
Mi serve uno strumento che sia...


Ripartiamo!

• Efﬁcace


Ripartiamo!

• Efﬁcace
• Flessibile


Ripartiamo!

• Efﬁcace
• Flessibile
• Economico


•i


Separare
Funzioni View
(Plugin) (Themes)


Framework
Front-End


Zurb Foundation


Foundation è un framework (con
licenza MIT) che comprende



• Una griglia responsive nidiﬁcabile agnostic device




• Stili mobile, bottoni e tipograﬁa





• Elementi di layout come tabs e pagination






• Forms






• Forms

• Plugin Javascript


Da dove viene Foundation



• Zurb - product design in Campbell, California




• Nato per creare rapidamente prototipi html/css




• Nato per creare rapidamente prototipi html/css

• Progettato per diventare codice di produzione


Mi piace perché...


Mi piace perché...

• Linguaggio semantico


Mi piace perché...

• Object oriented css


Separare struttura e skin
Ripetere caratteristiche visive
(background e stili border) come
skin separate che si possono
aggiungere ed espandere tra loro
per ottenere molta varietà
con poco codice.


Separare container e
content
Usare poco stili dipendenti
dalla posizione.
Un oggetto deve mantenere
le proprie caratteristiche,
non importa dove lo mettiamo.


Mi piace perché...

• Object oriented css
• Sass/Compass ready


Sass
Syntactically Awesome Stylesheets


Sass

• ��徱ﬁc��ǲԱ�


��徱ﬁc��ǲԱ�


/* style.scss */

#navbar {
width: 80%;
height: 23px;

ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}


/* style.scss */ /* style.css */

#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px; }
#navbar ul {
ul { list-style-type: none; } list-style-type: none; }
li { #navbar li {
float: left; float: left; }
a { font-weight: bold; } #navbar li a {
} font-weight: bold; }
}


Sass

• Variabili


Variabili


Variabili
/* style.scss */

$main-color: #ce4dd6;
$style: solid;

#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}

a {
color: $main-color;
&:hover { border-bottom: $style
1px; }
}


Variabili
/* style.scss */

$main-color: #ce4dd6;
$style: solid;
/* style.css */
#navbar {
#navbar {
border-bottom: {
border-bottom-color: #ce4dd6;
color: $main-color;
border-bottom-style: solid; }
style: $style;
}
a {
}
color: #ce4dd6; }
a:hover {
a {
border-bottom: solid 1px; }
color: $main-color;
&:hover { border-bottom: $style
1px; }
}


Sass

• Variabili
• Mixin


Mixin


Mixin
/* style.scss */

@mixin rounded-top-left {
$vert: top;
$horz: left;
$radius: 10px;

border-#{$vert}-#{$horz}-
radius: $radius;
-moz-border-radius-#{$vert}
#{$horz}: $radius;
-webkit-border-#{$vert}-
#{$horz}-radius: $radius;
}

#navbar li { @include rounded-
top-left; }
#footer { @include rounded-top-
left; }


Mixin
/* style.scss */
/* style.css */
@mixin rounded-top-left {
$vert: top;
#navbar li {
$horz: left;
border-top-left-radius: 10px;
$radius: 10px;
-moz-border-radius-topleft:
10px;
border-#{$vert}-#{$horz}-
-webkit-border-top-left-radius:
radius: $radius;
10px; }
-moz-border-radius-#{$vert}
#{$horz}: $radius;
#footer {
-webkit-border-#{$vert}-
border-top-left-radius: 10px;
#{$horz}-radius: $radius;
-moz-border-radius-topleft:
}
10px;
-webkit-border-top-left-radius:
#navbar li { @include rounded-
10px; }
top-left; }
#footer { @include rounded-top-
left; }


Sass

• Variabili
• Mixin
• Controll directive: @if, @for, @each,
@while


Control Directives


Control Directives

$class-slug: for !default

@for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i


Control Directives
.for-1 {
width: 61px;
}

.for-2 {
$class-slug: for !default width: 62px;
}
@for $i from 1 through 4
.#{$class-slug}-#{$i} .for-3 {
width: 60px + $i width: 63px;
}

.for-4 {
width: 64px;
}


Da dove si comicia?


Da dove si comicia?
Riga di comando!


Installo Foundation via Ruby gem


[sudo] gem install zurb-foundation



Creiamo il progetto!



Creiamo il progetto!
compass create <nomeprogetto> -r zurb-foundation --using foundation


Struttura del folder



WordpCamp/

sass-cache/
config.rb
humans.txt
images/
index.html
javascript/
MIT-LICENSE.txt
robots.txt
sass/
stylesheets/


@import "foundation/components/
modules/buttons";
// @import "foundation/
WordpCamp/
components/modules/tabs";
sass-cache/
components/modules/ui";
config.rb
humans.txt
modules/topbar";
images/
index.html
components/modules/navbar";
javascript/
MIT-LICENSE.txt
components/modules/orbit";
robots.txt
sass/
modules/reveal";
stylesheets/
components/modules/offcanvas";


Framework
è metodo


Grazie al metodo ho


Grazie al metodo ho

• Codice coerente


Grazie al metodo ho

• Codice coerente
• Codice scalabile e modulare


Grazie al metodo ho

• Codice coerente
• Consegne brevi


Grazie al metodo ho

• Codice coerente
• Consegne brevi
• Formazione extra WordPress


Grazie al metodo ho

• Codice coerente
• Consegne brevi
• Formazione extra WordPress
• Prodotti efﬁcaci, ﬂessibili ed
economici


“ Child themes and
a framework are
the only way you
should build your
WordPress site.

Matt Mullenweg
Founder, WordPress


Grazie!

Io sono Matteo Cavucci e questo intervento si chiama

“Perché odio i temi di WordPress”
mced.it - @MatteoMCED


�ݺ�ߣ

Perché odio i temi di WordPress

More Related Content

Perché odio i temi di WordPress