CODIFY

Creació d’un theme en wordpress (IV)

Posted by
El document functions.php

Al costat dels documents bàsics per la creació d’un theme de Wrodpress no podem obviar functions.php. Aquest és un document opcional per a un framework de WordPress però molt necessàri per activar i editar determinades funcionalitats en un theme una mica més avançat.

El document functions.php, se situa a l’arrel del directori del theme i queda automàticament vinculat al mateix. Entre moltes altres, les funcions principals permeten activar i editar plugins de WordPress, com ara l’edició de menus, la creació d’àrees de ginys (widgets), l’associació de miniatures als articles (thumbnails) o el control de la llargada dels resums de les entrades o posts del weblog …

A continuació trobareu un recull comentat del codi que hem treballat a classe per tal d’afegir aquestes funcionalitats extres al nostre framework.

functions.php

01. <?php
 
<!-- 'register_nav_menus' és una funció permet la creació de menus personalitzats per al theme. En aquest cas s'ha definit tres menus diferents: un primari, un secundari i un per a dispositius mòbils. Afegint aquesta funció s'activen les funcionalitats menus al tauler d'Aparença' de l'administrador. -->
 
02. register_nav_menus( array(
03.    'primary' => __( 'Menú principal', 'framework' ),
04.    'secondary' => __( 'Menú secundari', 'framework' ),
05.    'mobile' => __( 'Menú mòbil', 'framework' )
06. ));
 
07. function framework_theme_widget() {
08.   register_sidebar( array(
09.     'name' => 'Widget Peu',
10.     'id => 'footer_left',
11.     'before_widget' => '<div>',
12.     'after_widget' => '</div>',
13.     'before_title' => '<h4>',
14.     'after_title' => '</h4>',
15.  ));
16. }
 
17. add_action( 'widgets_init', 'framework_theme_widget' );
18. add_theme_support( 'post-thumbnails' );
 
19. ?>

Creació d’un theme en wordpress (III)

Posted by
La funció The Loop

The Loop és un codi PHP utilitzat per WordPress per mostrar publicacions. Mitjançant The Loop, WordPress processa cada entrada per mostrar diferents element de la mateixa (títol, autor, data, hora, contingut, categoria, resum, imatge destacada, …) a la pàgina en que hem inserit el codi. en aquest cas ho inserirem a l’arxiu index.php, tot ampliant el que ja vàrem comentar en el post anterior.

Qualsevol codi HTML o PHP del The Loop es processarà en cada publicació. D’aquesta manera disposem d’un gran control sobre la forma en que es mostra la publicació.

index.php
18. <!-- ampliació de la lliçó anterior -->
19. <section>
20. <?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
Aquí comença The Loop. Es tracta d'una estructura reiterativa que inserirà un article i tot el contingut que sol·licitem per cada entrada publicada.
 
21. <article>
22. <h3><?php the_title(); ?></h3>
Insereix el títol de l'entrada en forma de títol de nivell 3.
 
23. <p><small><?php echo get_the_date(); ?></small></p>
Insereix el la data de l'entrada per cada entrda.
 
24. <p><?php the_excerpt(); ?></p>
Insereix el resum de l'entrada.
 
25. </article>
26. <?php endwhile; else : ?>
27. <?php endif; ?>
Aquí tanquem i aturem la sentència reiterativa.
 
28. </section>

En funció del disseny i el contingut que desitgem mostrar, hi ha altres funcions que poden incrustar, per exemple, el contingut amb the_content();, l’autor amb the_author();, la categoria amb the_category(); i l’hora amb the_time, entre altres. Al codex de WordPress s’hi recullen les diferents opcions i els arguments que permeten personalitzar la forma com es mostren.

Creació d’un theme en wordpress (II)

Posted by

En aquest apartat fem una ullada al codi dels arxius imprescindibles per a la creació d’una plantilla. Encara és molt d’hora perquè aquesta es mostri de forma sòlida, però és un començament.

style.css

L’arxiu style.css conte les instruccions CSS que modifiquen el document HTML que mostra el servidor a l’usuari. En aquest sentit no hi ha cap novetat, però en el cas de wordpress, cal que inclogui un comentari a les primeres línies del document que permeten identificar el nom, la descripció i diferents detalls sobre el Theme. Sense aquestes línies, no veuríem el nom i els detalls del Theme a l’apartat aparença de l’administrador de WordPress. A continuació una mostra d’aquesta capçalera.

/*
Theme Name: Codify Theme
Theme URI: https://blocs.xtec.cat/codify/
Author: @guillemrigol
Author URI: https://blocs.xtec.cat/codify/
Description: A simple framework for a theme development
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codify
Tags: framework
*/

index.php

00. <?php /* Template Name: Codify Theme */ ?>
Aquesta línia identifica el template del theme amb un nom.
 
01. <!DOCTYPE html>
02. <html <?php language_attributes(); ?>>
A la fila 02. en verd es pot llegir la instrucció PHP que després imprimirà l'atribut que identifica la llengua en que s'escriu la pàgina. Per exemple: lang="ca".
 
03. <head>
04. <title><?php bloginfo( 'name' ); ?></title>
La instrucció PHP bloginfo(); de la línia 04. permet cridar diferents atributs del blog. En aquest cas, el nom o títol del weblog, que es controla des de les opcions generals de wordpress. Aquesta instrucció també pot cridar la descripció, el grup de caràcters , fins i tot, el directori de l'style.css, com es pot veure a les línies 05., 07. 13. i 15.
 
05. <meta charset="<?php bloginfo( 'charset' ); ?>"/>
06. <meta name="viewport" content="width=device-width, initial-scale=1"/>
07. <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"/>
08. <?php wp_head(); ?>
La funció no admet paràmetres però serveix per inserir estils, scripts i etiquetes necessàries pel funcionament de diferents plugins bàsics de WordPress. Cal situar-lo just abans de tancar l'etiqueta <head>.
 
09. </head>
10. <body>
11. <div id="wrapp">
12. <header>
13. <h1><?php bloginfo( 'name' ); ?></h1>
14. <h2><?php bloginfo( 'description' ); ?></h2>
15. <nav>
16. <?php wp_nav_menu(); ?>
La funció admet arguments i serveix per inserir el menu de navegació.
 
17. </nav>
18. </header>
19. <section>
20. <article>
21. </article>
22. </section>
23. <footer>
24. <?php wp_footer();?>
La funció no admet paràmetres però insereix referències Javascript necessàries pel funcionament de diferents plugins bàsics pel perfil de WordPress. Cal situar-lo just abans de tancar l'etiqueta <body>.
 
25. </footer>
26. </div>
27. </body>
28. </html>

Creació d’un theme en WordPress (I)

Posted by

Existeixen molts themes disponibles per wordpress. Els themesés un directori d’arxius que modificquen l’aspecte del weblog i que permet personalitzar la manera com es mostra i estructura el contingut. Canvia aspectes com els colors, la capçalera, la pàgina principal, el format de les dades, etc.

Molts d’aquests themes són gratuïts i lliures, d’altres, sovint els més atractius i complets, són de pagament i amb drets de reproducció limitats.

En aquesta entrada comencem una lliçó que ocuparà diferents articles destinats a aprendre a crear un theme de wordpress, original i des de zero.

El framework bàsic

Les plantilles de WordPress estan composades per llarga corrua d’arxius PHP que inclouen diversos llenguatges, d’arxius CSS i JavaScript, entre altres. En aquest primer post plantegem la creació d’un framework (marc de treball) que permeti visualitzar els continguts que s’editen i publiquen des de la interfície d’administrador de WordPress (dashboard).

Per realitzar aquest framework més bàsic, necessitarem dos arxius, a tot estirar tres:

  • index.php Aquest arxiu allotjarà el document HTML i les instruccions més bàsiques en PHP perquè es mostrin els continguts de wordpress.
  • style.css Aquest arxiu allotja el codi CSS, que permet modificar la forma en que es mostra la pàgina, i una capçalera dins d’un comentari que dona nom i descriu la plantilla per a wordpress.
  • screenshot.png Aquest arxiu és la imatge que identifica la plantilla des de l’apartat themes de wordpress. Aquesta imatge cal que sigui de 1200X900 píxels, com a mínim, per no perdre resolució i que es vegi correctament des del perfil d’administrador de WordPress.

Què és PHP?

Posted by

PHP (l’acrònim de Hypertext Preprocessor) és un llenguatge de codi obert molt popular especialment adequat pel desenvolupament web, ja que es pot conjugar fàcilment almb el llenguatge HTML. A continuació podreu veure un exmeple de tot plegat:

01. <!DOCTYPE html>
02. <html>
03. <head>
04.   <title>Exemple HTML i PHP</title>
05. </head>
06. <body>
07.   <?php echo "¡Hola, sóc un script en PHP!"; ?>
08. </body>
09. </html>

En comptes d’escriure moltes ordres per mostrar el document HTML (com si que succeeix en C o en Perl), el codi PHP queda incrustat dins l’HTML i du a terme alguna funció (en aquest exemple, mostra “Hola, sóc un script de PHP!”) dins el cos del document HTML. El codi de PHP està tancat entre les etiquetes especials de començament <?php i final ?>, que permeten entrar i sortir del “mode PHP”.

El que distingeix a PHP d’altres llenguatges relacionats amb la web, com ara Javascript, és que el codi PHP s’executa del costat del servidor, generant el document HTML i enviant-ho al client. El client rebrà el resultat d’executar l’script sense saber el codi subjacent original. El servidor web pot ser configurat fins i tot perquè processi tots els fitxers HTML amb PHP.

Instal·lació de Worpress (localhost)

Posted by

En aquest article s’explica pas a pas com instal·lar WordPress en un ordinador personal mitjançant un servidor local. Disposar d’un WordPress local és molt útil per què permet treballar-hi com en un banc de proves. És molt útil per dissenyar un blog o una web abans de publicar-ho a Internet.

Primer pas: Servidor local

El primer que cal fer és activar el servidor local. Un servidor local és una aplicació que simula el funcionament d’un servidor web real però en el pla local. Inclou el sistema de servidors web Apache i les aplicacions addicionals Mysql y PHP, entre altres.

Existeixen diferents opcions, sovint associades a diferents sistemes operatius. Tenim MAMP, per a MAC i Windows. WAMP per a Windows, i XAMPP per a Linux, Windows i MAC.

Tria l’opció que més s’adigui a les teves necessitats i al teu equip i instal·la-la. Un cop instal·lada, activa tots els serveis.

Segon pas: Creació de la base de dades.

Per instal·lar WordPress i aconseguir que desplegui totes les seves funcions, necessitarem crear una base de dades. Per crear-la obrirem el servvei PhpMyAdmin del servidor. És possible que et demani contrasenya o usuari. En servidors locals acostuma a ser “root”.

Un cop dins l’aplicació PhpMyAdmin anem a “Database” i creem una base de dades. Cal recordar el nom de la mateixa. En aquest pas a pas l’anomenarem wpsample.

Tercer pas: Preparació del directori WordPress.

En aquest pas prepararem el directori d’instal·lació i allotjament de WordPress. El primer que ens cal és baixar els documents del CMS de WordPress. Clicant aquí pots descarregar la versió oficial en català. Comprovarem que WordPress se’ns descarrega en una carpeta comprimida en .zip. Cal extreure el contingut al directori de lectura i emmagatzematge del Servidor local. En el cas de MAMP server cal seguir la ruta següent.

c://MAMP/htdocs/wpsample

Com podeu comprovar aquí hem canviat el nom de la carpeta (de wordpress a wpsample) per poder referenciar millor el tutorial.

Quartpas: Instal·lació del CMS WordPress.

Cal activar tots els serveis del servidor local i obrir el navegador i escriure la ruta següent a la barra d’adreces.

http://localhost/wpsample

En aquest punt comprovarem que se’ns presenta una pàgina d’instal·lació molt senzilla de seguir. Ens demanarà informació relativa a la base de dades i a l’usuari i la contrasenya d’accés al mateix. Si seguim els passos, la instal·lació és ràpida i senzillai rapidament podrem gaudir d’una mostra local del gestor de continguts més famós.

Què és WordPress?

Posted by

WordPress és un sistema de gestió de continguts de codi obert per a la publicació de continguts, la creació i la gestió de blogs i webs.

Hi ha dos versions de WordPress en funció de si l’allotjament i el domini el gestiona el propi WordPress o si el gestiona l’usuari des d’un servidor web alternatiu. En el primer cas ens adreçarem a WordPress.com, ens registrarem i seguirem unes instruccions molt senzilles per obrir el lloc web. Te algunes limitacions quan al disseny i la personalització, però és una bona forma de començar a experimentar amb la publicació de continguts.

En el segon cas en que l’allotjament i domini estan gestionats pel propi usuari necessitem disposar d’un servidor propi o tenir contractats els serveis amb una empresa de comercialització de hostings i dominis. La majoria d’aqiestes ja disposen de paquets d’instal·lació automàtics de wordpress. No obstant, si no és així, haurem d’anar a ca.wordPress.org per descarregar els arxius necessaris per a la instal·lació.

A WordPress se li poden afegir funcionalitats per mitjà de connectors i extensions, i també és possible canviar l’aparença visual per mitjà de temes predefinits. A més, l’usuari pot modificar al seu gust el codi XHTML, HTML i CSS de les seves pàgines mitjançant l’editor WYSIWYG que inclou.

En aquest curs aprendrem a fer anar el sistema de publicació de wordpress, a instal·lar-lo en un servidor local, a aplicar plantilles i extensions i, fins i tot, a fer una plantilla completament original.

Cuinant webs 2018

Posted by

Els alumnes de 2n. curs de Sistemes microinformàtics i xarxes (2016-2018) de La Salle Manlleu estan participant al concurs websalpunt.cat, un concurs de creació de llocs web en català adreçat a alumnes d’ESO, Batxillerat i Cicles Formatius de Grau Mitjà o Superior. El certamen té per objectius fomentar el coneixement de les noves tecnologies, la creativitat dels participants i la normalització del català en l’entorn digital.

El concurs només accepta llocs web desenvolupats en l’àmbit acadèmic per grups d’entre 2 i 5 alumnes que siguin supervisats pels tutors del seu centre. Els llocs web que estan desenvolupant els alumnes de l’escola són nutricits.cat, una web sobre nutrició; traps.cat, un portal sobre la cultura del trap; creepymon.cat, una pàgina sobre històries paranormals, clàssics i relats pròpis; osotravel.cat, Web de propostes turístiques; eatcatwide.cat, una web de cuines del món a casa nostra; i nekkogaijin.cat, la cultura japonesa apropada als catalans.

De moment, tots aquests llocs web estan en la fase de desenvolupament local. Aviat podreu visitar la versió estàtica de les mateixes.

Introducció al document CSS

Posted by

Cascading Style Sheets (CSS, en català: Fulls d’Estil en Cascada) és un llenguatge de fulls d’estil utilitzat per descriure la semàntica de presentació (l’aspecte i format) d’un document escrit en un llenguatge de marques. La seva aplicació és, sobretot, el disseny de pàgines web escrites en HTML i XHTML, però el llenguatge també pot ser aplicat a qualsevol classe de document XML, incloent-hi SVG.

CSS està dissenyat principalment per permetre la separació de contingut del document de la presentació del document, incloent-hi elements com la disposició, colors, i fonts. Aquesta separació pot millorar l’accessibilitat al contingut, proporcionar més flexibilitat i control en l’especificació de característiques de presentació, permetre que múltiples pàgines comparteixin un format comú, i redueix complexitat i repetició en el contingut estructural (com per exemple al permetre disseny web sense taules).

CSS té una sintaxi simple i utilitza un cert nombre de paraules clau angleses per especificar els noms de diverses propietats d’estil. Un full d’estil consta d’una llista de regles. Cada regla o conjunt de regles consta d’un o més selectors i un bloc de declaracions. Un bloc de declaració consta d’una llista de declaracions entre claus d’ator({}). Cada declaració mateixa consta d’una propietat, dos punts (:), un valor, seguit de punt i coma (;).

Continua llegint →

Etiqueta Link

Posted by

L’etiqueta <link> defineix la relació entre un document i un recurs extern com ara una referència CSS. Té les següents característiques:

  • És part de la pàgina HTML.
  • Es diferència de l’etiqueta <a> perquè <link> només es pot anar al <head>.
  • L’etiqueta no té presència visual al document HTML. L’usuari no pot veure l’etiqueta <link>, només els seus efectes.
  • S’utilitza per relacionar el document amb un altre document.
  • L’etiqueta <link> també té un atribut href, que descriu la ubicació de l’altre document.

Continua llegint →