Crear Una Plantilla de Wordpress Con Bootstrap Parte 1 - GeekPurpleGeekPurple

7/7/2016
CrearunaplantilladeWordpressconBootstrapParte1GeekPurpleGeekPurple
CrearunaplantilladeWordPressconBootstrapParte1
Publicadopor:YolandaJimnez,enero29,2014
CrearunaplantilladeWordPressconBootstrap
LeerResumen
LeerParte2
LeerParte3(Descargaincluida)
EstaeslasegundaentradadetresentotaldondecontamoscomoCrearunaplantilladeWordPressconBootstrap
Estossonlospuntosquevamosaverenestaentrada:
1.Creamosestructurabsicadeuntemaparawordpress.
Crearemosloselementosesencialesparaqueworpressreconozcanuestraplantilla,losficheros
style.css,index.phpyscreenshot.png
2.AdaptamosnuestrawebcreadaenBootstrapparawordpress
Enlospasossiguientesvamosamodificarelindex.phpycreartresficherosnecesariosparaelbuenfuncionamientode
laplantilla,header.php,footer.phpyfunctions.php
1.Creamosestructurabsicadeuntemaparawordpress.
Paraquefuncionenuestraplantillanecesitaremostrescosas,losficherostyle.csseindex.php,yunaimagenquenos
aparecerenelpaneldeadministradordewordpress.
Paso1.
Creamoselficherostyle.cssconlasiguientecabecera,msadelantelepondremoselcontenido.
/*
ThemeName:WPBootstrap
ThemeURI:http://geekpurple.com/Plantilla_Wordpress
Description:MiprimertemadeWP.
Author:YolandaJimenez
AuthorURI:http://geekpurple.com/Plantilla_Wordpress
Version:1.0
*/
Paso2.
Cambiaremoslaextensindelficheroindex.htmlporindex.php,despusloabrimosyvamosaescribirlasiguiente
cabecera,des
<?php
/*
Themaintemplatefile.
http://geekpurple.com/crearunaplantilladewordpressconbootstrap2/
ThemeName:WPBootstrap
1/11
7/7/2016
ThemeURI:http://geekpurple.com/Plantilla_Wordpress
Description:Plantillademoparaelpost<ahref="http://geekpurple.com/Plantilla_Wordpress">Comohacerunaplantil
Author:YolandaJimenez
AuthorURI:http://geekpurple.com/
Version:1.0
EstetemahasidocreadobasandonosenlosejemplosdeBootstrapparacrearunaweb
*/
?>
Paso3.
Noscreamosunaimagenconelnombrescreenshot.pngytamao300x225px
Paso4.
Crearemosnuestroiconofavicon.ico,deberteneruntamaode1515,esteiconoserelqueaparecerenlabarra
denuestronavegador.
Paso5.
Comprimimosen.ziplacarpetawpbootstrapconelsiguientecontenido:
Paso6.
Entramosennuestrasweb,subimosel.zipdesdeelpaneldecontroldeWordPressyloinstalamos.
2/11
7/7/2016
Ahoramismoelresultadodenuestrawebestotalmenteplanoysinformatoperohemoscreadountemasencilloy
funcionalparawodpress.Enlossiguientespasosvamosaempezaraadaptarlo.
3/11
7/7/2016
2.AdaptamosnuestrawebcreadaenBootstrapparawordpress
Enlospasossiguientesvamosamodificarelindex.phpycreartresficherosnecesariosparaelbuenfuncionamientode
laplantilla,header.php,footer.phpyfunctions.php.
Losficherosheader.phpyfooter.phpsernnicosparatodalawebyusadosentodaslaspginas,estonosayudaala
horadeactualizaromodificarlawebyaquealcambiarunsoloficherolamodificacinafectaatodalapginayno
tenemosqueircambiandoficheroporfichero.
Unavezexplicadoestovamosaagregarpasoapasaenelindex.phplasfuncionesget_header()yget_footer()para
poderaccederasucontenido,cadaunadeestasfuncionessustituirsucdigocorrespondiente.
<?phpget_header();?>:
Equivalealcontenidode
<head></head>
ademsdelanavegacinylaprimeraetiqueta
<body>
<?phpget_footer();?>
:Equivaleelfooterhastalaetiqueta
4/11
7/7/2016
</body>
yelfinaldelapgina
Paso1.Creamoselficheroheader.php
Nosabrimoselficheroindex.phpydeberemoscopiarelcontenidoqueserutilizadocomoheaderentodalawebenun
nuevoficherollamadoheader.php,desdelalnea16ala72(correspondientealindex.php)
Unavezquelohemoscopiado,lopegamosenelheader.phpyloreemplazamosenelindex.phpporlasentencia
<?phpget_header();?>
1 <?php
2 /*ThemeName:WPBootstrap
3 ThemeURI:http://geekpurple.com/Plantilla_Wordpress
4 Description:Plantillademoparaelpost<ahref="http://geekpurple.com/Plantilla_Wordpress">Comohacerunaplant
5 Author:YolandaJimenez
6 AuthorURI:http://geekpurple.com/
7 Version:1.0
8 Tags:wordpress,blog,bootstrap
9 License:AttributionShareAlike3.0Unported(CCBYSA3.0)
10LicenseURI:http://creativecommons.org/licenses/bysa/3.0/
11EstetemahasidocreadobasandonosenlosejemplosdeBootstrapparacrearunaweb
12*/
13?>
14
15
16<!DOCTYPEhtml>
17<htmllang="en">
18<head>
19<metacharset="utf8">
20<title>Bootstrap,fromTwitter</title>
21<metaname="viewport"content="width=devicewidth,initialscale=1.0">
22<metaname="description"content="">
23<metaname="author"content="">
24
25<!Lestyles>
26<linkhref="css/bootstrap.css"rel="stylesheet">
27<style>
28body{
29paddingtop:60px;/*60pxtomakethecontainergoallthewaytothebottomofthetopbar*/
30}
31</style>
32<linkhref="css/bootstrapresponsive.css"rel="stylesheet">
33
34<!LeHTML5shim,forIE68supportofHTML5elements>
35<![ifltIE9]>
36<scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
37<![endif]>
38
39<!Lefavandtouchicons>
40<linkrel="shortcuticon"href="../assets/ico/favicon.ico">
41<linkrel="appletouchiconprecomposed"sizes="114x114"href="../assets/ico/appletouchicon114precomposed.
42<linkrel="appletouchiconprecomposed"sizes="72x72"href="../assets/ico/appletouchicon72precomposed.png
43<linkrel="appletouchiconprecomposed"href="../assets/ico/appletouchicon57precomposed.png">
44
45
46
47
48</head>
5/11
49
7/7/2016
50<body>
51
52<divclass="navbarnavbarfixedtop">
53<divclass="navbarinner">
54<divclass="container">
55<aclass="btnbtnnavbar"datatoggle="collapse"datatarget=".navcollapse">
56<spanclass="iconbar"></span>
59</a>
60<aclass="brand"href="#">Projectname</a>
61<divclass="navcollapse">
62<ulclass="nav">
63<liclass="active"><ahref="#">Home</a></li>
64<li><ahref="#about">About</a></li>
65<li><ahref="#contact">Contact</a></li>
66</ul>
67</div><!/.navcollapse>
68</div>
69</div>
70</div>
71
72
<divclass="container">
73
<!Bodycontent>
74
75<divclass="herounit">
76<h1>GuadeusoBootstrapenGeekPurple</h1>
77<p>EstamoshaciendounejemplosencilloparaempezaratrabajarconBootstrap.</p>
78
79<divid="myCarousel"class="carousel">
80<olclass="carouselindicators">
81<lidatatarget="#myCarousel"dataslideto="0"class="active"></li>
82<lidatatarget="#myCarousel"dataslideto="1"></li>
84</ol>
85<!Carouselitems>
86
87<divclass="carouselinner">
88
89<divclass="activeitem"><imgsrc="wpcontent/themes/wpbootstrap/img/imagen1.jpg"alt="imagen
90<divclass="item"><imgsrc="wpcontent/themes/wpbootstrap/img/imagen2.jpg"alt="imagen2"/>
91<divclass="carouselcaption">
92<h4>FirstThumbnaillabel</h4>
93<p>Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportag
94</div>
95</div>
96
97<divclass="item"><imgsrc="wpcontent/themes/wpbootstrap/img/imagen3.jpg"alt="imagen3"/></
98
99</div>
100
101
<!Carouselnav>
102
<aclass="carouselcontrolleft"href="#myCarousel"dataslide="prev">&lsaquo;</a>
103
<aclass="carouselcontrolright"href="#myCarousel"dataslide="next">&rsaquo;</a>
104
</div>
105
106
</div>
107
108
<divclass="rowfluid">
109
110
111
<divclass="span4"><h2>Titulo1</h2>
6/11
112
<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Aeneansollicitudinvestibulumesta
7/7/2016
113
114
<aclass="btnbtnprimary"href="#">Botntitulo1</a>
115
116
<iclass="icontrashiconwhite"></i>
117
</div>
118
119
120
121
122
123
</div>
124
125
126
127
128
</div>
129
</div>
130
</div>
131
</div>
132
<!Lejavascript
133
==================================================>
134
<!Placedattheendofthedocumentsothepagesloadfaster>
135
136
<scriptsrc="http://code.jquery.com/jquery.js"></script>
137
<scriptsrc="js/bootstrapcarousel.js"></script>
138
<scriptsrc="js/bootstrap.min.js"></script>
139
<scriptsrc="js/bootstraptransition.js"></script>
140
<scriptsrc="js/bootstrapalert.js"></script>
141
<scriptsrc="js/bootstrapmodal.js"></script>
142
<scriptsrc="js/bootstrapdropdown.js"></script>
143
<scriptsrc="js/bootstrapscrollspy.js"></script>
144
<scriptsrc="js/bootstraptab.js"></script>
145
<scriptsrc="js/bootstraptooltip.js"></script>
146
<scriptsrc="js/bootstrappopover.js"></script>
147
<scriptsrc="js/bootstrapbutton.js"></script>
148
<scriptsrc="js/bootstrapcollapse.js"></script>
149
150
<scriptsrc="js/bootstraptypeahead.js"></script>
151
<script>
152
$(document).ready(function(){
153
$('.carousel').carousel();
154
});
155
</script>
156
</body>
157
</html>
Paso2.Creamoselficherofooter.php
Comoenelcasoanteriorvamosacopiarelcontenidoquenecesitaremosparaelfooterenelnuevoficherofooter.phpy
losustituiremosporlasentencia
Enelcdigosiguiente(correspondientealindex.php)desdelalnea81ala108correspondealfooter.
1 <?php
2 /*
3 ThemeName:WPBootstrap
4 ThemeURI:http://geekpurple.com/Plantilla_Wordpress
5 Description:Plantillademoparaelpost<ahref="http://geekpurple.com/Plantilla_Wordpress">Comohacerunaplant
6 Author:YolandaJimenez
7 AuthorURI:http://geekpurple.com/
8 Version:1.0
7/11
9 Tags:wordpress,blog,bootstrap
7/7/2016
10
11License:AttributionShareAlike3.0Unported(CCBYSA3.0)
12LicenseURI:http://creativecommons.org/licenses/bysa/3.0/
13
14EstetemahasidocreadobasandonosenlosejemplosdeBootstrapparacrearunaweb
15*/
16?>
17
18<?phpget_header();?>
19
20
<!Bodycontent>
21
22<divclass="herounit">
23<h1>GuadeusoBootstrapenGeekPurple</h1>
24<p>EstamoshaciendounejemplosencilloparaempezaratrabajarconBootstrap.</p>
25
26<divid="myCarousel"class="carousel">
27<olclass="carouselindicators">
28<lidatatarget="#myCarousel"dataslideto="0"class="active"></li>
31</ol>
32<!Carouselitems>
33
34<divclass="carouselinner">
35
36<divclass="activeitem"><imgsrc="img/imagen1.jpg"alt="imagen1"/></div>
37<divclass="item"><imgsrc="img/imagen2.jpg"alt="imagen2"/>
38<divclass="carouselcaption">
39<h4>FirstThumbnaillabel</h4>
40<p>Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportag
41</div>
42</div>
43
44<divclass="item"><imgsrc="img/imagen3.jpg"alt="imagen3"/></div>
45
46</div>
47
48<!Carouselnav>
49<aclass="carouselcontrolleft"href="#myCarousel"dataslide="prev">&lsaquo;</a>
50<aclass="carouselcontrolright"href="#myCarousel"dataslide="next">&rsaquo;</a>
51</div>
52
53</div>
54
55<divclass="rowfluid">
56
57
58<divclass="span4"><h2>Titulo1</h2>
59<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Aeneansollicitudinvestibulumesta
60
61<aclass="btnbtnprimary"href="#">Botntitulo1</a>
62
63<iclass="icontrashiconwhite"></i>
64</div>
65
69
70</div>
71
8/11
7/7/2016
75
76</div>
77</div>
78
79
</div>
80
81
</div><!/.Container>
82<!Lejavascript
83==================================================>
84<!Placedattheendofthedocumentsothepagesloadfaster>
85
86<scriptsrc="http://code.jquery.com/jquery.js"></script>
87<scriptsrc="js/bootstrapcarousel.js"></script>
88<scriptsrc="js/bootstrap.min.js"></script>
89<scriptsrc="js/bootstraptransition.js"></script>
90<scriptsrc="js/bootstrapalert.js"></script>
91<scriptsrc="js/bootstrapmodal.js"></script>
92<scriptsrc="js/bootstrapdropdown.js"></script>
93<scriptsrc="js/bootstrapscrollspy.js"></script>
94<scriptsrc="js/bootstraptab.js"></script>
95<scriptsrc="js/bootstraptooltip.js"></script>
96<scriptsrc="js/bootstrappopover.js"></script>
97<scriptsrc="js/bootstrapbutton.js"></script>
98<scriptsrc="js/bootstrapcollapse.js"></script>
99
100
<scriptsrc="js/bootstraptypeahead.js"></script>
101
<script>
102
103
104
});
105
</script>
106
107
</body>
108
</html>
Paso3.
Enestepasovamosasolucionarelproblemadeloslinksrotosdeloscssyhacerquelosjavascriptnosfuncionen.
Vamosaactualizarelficheroheader.php
Primerosolucionamoselproblemadelinksdecss,sustituimoselcdigodelheader.php
<!Lestyles>
<linkhref="css/bootstrap.css"rel="stylesheet">
<style>
body{
paddingtop:60px;/*60pxtomakethecontainergoallthewaytothebottomofthetopbar*/
}
</style>
<linkhref="css/bootstrapresponsive.css"rel="stylesheet">
Por
<linkhref="<?phpbloginfo('stylesheet_url');?>"rel="stylesheet">
Unavezsolucionadoloslinksdecssnecesitaremosmeterlossiguienteshooks(instanciasdecdigo)para
9/11
7/7/2016
asegurarnosdequelospluginyjavascriptqueusemosfuncionenperfectamente.Lopondremosantesdelallamadaa
losdemsjavascript
<?phpwp_enqueue_script("jquery");?>
<?phpwp_head();?>
Abrimoselficherostyle.cssyaadimoselsiguientecdigoparaimportarloscssdelproyectobootstrap:
@importurl('css/bootstrap.css');
@importurl('css/bootstrapresponsive.css');
body{
paddingtop:60px;
paddingbottom:40px;
}
Actualizamoselfooter.php
Podemosverqueenelfootertenemosvariosjavascript,vamosamoverlosalficheroheader.phpperosoloaquellos
quevamosanecesitar,deestaformaeliminamoslosinnecesariosylimpiamoselcdigo.
<scriptsrc="http://code.jquery.com/jquery.js"></script>
<scriptsrc="js/bootstrapcarousel.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
<script>
});
</script>
Porotroladoigualquenosocurraenelheadernecesitamoselhookllamadowp_footer(),loincluiremosenelcdigo.
Elresuladofinalser:
</div><!/.Container>
<?phpwp_footer();?>
</body>
</html>
Paso4.Ficherofunctions.php
Elficherofunctions.phpesmuyimportanteenlasplantillasdewordpress,aquestnfuncionesespecialesydonde
podremosaadirmuchasfuncionalidades.Crearemosunficheroconelnombrefunctions.phpypegaremoselsiguiente
cdigoparaquelosscriptnosfuncionenperfectamente.
<?php
functionwpbootstrap_scripts_with_jquery()
{
//Registerthescriptlikethisforatheme:
wp_register_script('customscript',get_template_directory_uri().'/js/bootstrap.js',array('jquery'));
//Foreitherapluginoratheme,youcanthenenqueuethescript:
wp_enqueue_script('customscript');
}
add_action('wp_enqueue_scripts','wpbootstrap_scripts_with_jquery');
?>
10/11
7/7/2016
Ademsaadiremoselsiguientecdigoparapoderaadirelementosalsidebardesdeelpaneldeadministracinde
wordpress,(msadelantenoscentraremosenlacreacindelbarralateralsidebar):
<?php
if(function_exists('register_sidebar'))
register_sidebar(array(
'before_widget'=>'',
'after_widget'=>'',
'before_title'=>'<h3>',
'after_title'=>'</h3>',
));
?>
Paso5.Probamoslaplantilla.
Unavezrealizadotodosloscambiosprobamoslaplantilladenuevo,podiscambiarledetamaoparaverquese
ajustaalapantallasinproblemas,elresultadodebeserelsiguiente:
11/11

Crear Una Plantilla de Wordpress Con Bootstrap Parte 1 - GeekPurpleGeekPurple

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Crear Una Plantilla de Wordpress Con Bootstrap Parte 1 - GeekPurpleGeekPurple

Hochgeladen von

Copyright:

Verfügbare Formate

7/7/2016

Das könnte Ihnen auch gefallen