Introducción a Craft CMS

Este es un tutorial de seguimiento de Introducción a Craft CMS. Si no está familiarizado con Craft, le recomiendo que primero lea la primera parte. Luego, regrese aquí y siga nuestra guía de instalación y cómo empezar.

¿Qué es Craft CMS?

Craft CMS  de Pixel & Tonic es una alternativa de WordPress para editores orientados al desarrollo que desean un control más profundo y un rendimiento más potente de sus herramientas de administración de contenido. También es una opción potencial para que los consultores y desarrolladores amplíen sus ofertas a clientes.

Craft no es un constructor de sitios—necesitaras construir tu HTML, CSS y JavaScript incorporando plantillas de Twig. Esto no será intimidante para aquellos acostumbrados a la construcción de temas de WordPress. Para otros, por desgracia, no hay tema oficial o mercado de complementos en este momento (aunque no me sorprendería si aparece en el futuro). Sin embargo, Craft está diseñado para ser excepcionalmente escalable y ofrece características nativas para relaciones complejas de administración de contenido.

Es una opción apropiada para los sitios web pequeños, pero brillará con los sitios de contenido más grande con contenido multi-capas, interrelacionado.

Craft está escrito en PHP en la potente plataforma Yii 1.x. Si no has oído hablar de Yii, puedes leer mi Introducción al Framework Yii en Tuts+. Usted no necesita saber PHP o Yii para usar Craft. Es similar a las herramientas de CMS con Django escritas en Python.

Aunque es posible que no haya oído hablar de Craft, su comunidad de desarrolladores está creciendo rápidamente. En junio pasado, su propuesta para un sitio Craft CMS StackExchange fue aprobada en sólo cinco días.

Puede ver un escaparate de los sitios que ejecutan Craft aquí.

En este tutorial, le guiaré a través del proceso de instalación de Craft, su sitio de demostración y familiarizarse con Craft para crear su propio sitio con él.

Instalación de Craft en el sitio de demostración On The Rocks

Primero, vamos a instalar el sitio de demostración On the Rocks de Craft con el tema y el contenido de la muestra. Este sitio también desbloquea todas las funciones premium para las pruebas.

Estoy usando Mac OS X con MAMP. Mis sitios locales se ejecutan en el directorio ~/Sites. Vamos a clonar el sitio de demostración Craft de Github:

1

git clone https://github.com/pixelandtonic/ontherocks.git

A continuación, establezcamos los permisos de archivo para los directorios internos de Craft:

1

cd ontherocks

2

chmod 777 craft/storage/

3

chmod 774 craft/config

A continuación, actualizamos la última versión de Craft. En febrero de 2015, usé la versión 2.3.2627. Sin embargo, puede encontrar lo último en la página "Actualizaciones" en el sitio web de Craft.

1

curl -L http://download.buildwithcraft.com/craft/2.3/2.3.2627/Craft-2.3.2627.zip -o /tmp/Craft.zip

2

unzip /tmp/Craft.zip -d BaseCraft

3

cp -R BaseCraft/craft/app craft/app

4

rm -R BaseCraft && rm /tmp/Craft.zip

Entonces, utilicé PHPMyAdmin para crear la base de datos:

Haga clic en la base de datos ontherocks en PHPMyAdmin. A continuación, haga clic en Importar y elija el archivo en ~/Sites/ontherocks/SQL/ontherocks.sql:

A continuación, edite el archivo de configuración de base de datos con las credenciales de su base de datos MySQL local:

1

 nano ~/Sites/ontherocks/craft/config/db.php 

1

/**

2

 * Database Configuration

3

 *

4

 * All of your system's database configuration settings go in here.

5

 * You can see a list of the default settings in craft/app/config/defaults/db.php

6

 */

7

8

return array(

9

        'server'      => 'localhost',

10

        'user'        => 'rocks_user',

11

        'password'    => 'yourpassword',

12

        'database'    => 'ontherocks',

13

        'tablePrefix' => 'craft',

14

);

Cree un nuevo host virtual con el nombre de host "ontherocks.dev" que apunte a la carpeta public/ .

Edite su archivo /etc/hosts para resolver ontherocks.dev a 127.0.0.1, si es necesario:

1

##

2

# Host Database

3

#

4

# localhost is used to configure the loopback interface

5

# when the system is booting.  Do not change this entry.

6

##

7

127.0.0.1       localhost 

8

127.0.0.1       ontherocks.dev

El panel de control de Craft se encuentra en http://ontherocks.dev/admin. Cuando esté cargado, verás algo como esto: monos ... y globos oculares!

A continuación, se le pedirá que actualice la base de datos:

Puede iniciar sesión con las siguientes credenciales: Nombre de usuario: admin, Contraseña: contraseña.

El Panel de Control de Craft

Aquí está el panel de control—se parece un poco a WordPress, ¿eh?

Aquí está la página principal de On the Rocks:

Explorando el sitio de demostración Happy Lager

Los buenos amigos de Pixel & Tonic me dieron un pre-lanzamiento de su nuevo y gratuito sitio de demostración, que espero que esté disponible para cuando lo leas—clonarlo aquí. El nuevo sitio se llama Happy Lager:

Los pasos de instalación son exactamente los mismos que los descritos anteriormente para On the Rocks. El repositorio Git debe ubicarse aquí:

1

git clone https://github.com/pixelandtonic/happylager.git

Happy Lager hace uso de las capacidades de diseño más profundas de Craft. Aquí hay un par de capturas de pantalla de la página Acerca de:

Debajo de la tapa:

Aquí está la página de servicios:

Página de entradas de Craft

Aquí está la página de Entradas en el tablero con todo el contenido de Happy Lager:

Eche un vistazo a los tipos de entrada en el panel de navegación izquierdo: Singles, Canales y Estructuras. Craft ofrece tipos de datos más sofisticados y extensibles que WordPress.

Singles son una página que tienen un diseño único, como la página de inicio de su sitio. Los canales son para entradas organizadas por fecha, como un blog o secciones de noticias. Las estructuras son para contenido proporcionado en un orden predefinido.

El editor de Craft

Aquí está la página de edición. Obsérvese la amplitud de campos posibles que son de nuevo personalizables, p. Título, imagen destacada, descripción corta, título, subtítulo, cuerpo del artículo.

Observe debajo de la tapa cómo el tipo de comillas ofrece varios diseños en el flujo de la historia como lo hace la imagen que sigue (pero no podía incluirlo todo en la captura de pantalla):

Esta capacidad es lo que Craft llama Matrix, y permite una composición de la historia más poderosa y el diseño. Cada bloque puede tener campos personalizados y una posición personalizada, y puede arrastrarse y soltarse en el flujo. Aquí hay un pequeño video que muestra a Matrix:

Aquí está la vista previa en linea—simplemente hermosa. Me recuerda a la previsualización de Ghost Markdown que escribí en Mantenerse al día con Ghost 0.5 (Tuts+). Los lectores pueden recordar que odio a Markdown, por lo que aprecio mucho el Craft en vivo de vista previa:

Aquí hay un poco más en Vista previa en linea:

Craft ofrece un fácil acceso a revisiones anteriores:

La Biblioteca de Medios de Craft

Los archivos de imagen se organizan por grupo y están disponibles en la página Assets:

Si alguna vez has esperado a WordPress para cargar tu página de medios, apreciarás lo rápido que es Craft.

Construyendo la página principal de Happy Lager

Aquí está una mirada más cercana al contenido detrás de las partes de la página de inicio de Happy Lager—específicamente, así es como se ve cuando se edita el contenido:

Craft utiliza las plantillas Twig para transponer los elementos de contenido estructurado en páginas web:

1

{#

2

    # About template

3

  # -------------------

4

	#

5

	# Single about template

6

	#

7

	#

8

	#}

9

{% extends "_layouts/site" %}

10

11

{% block main %}

12

13

	<header class="alt">

14

		<div class="flex">

15

			<div class="g1-flex4 g2-flex6 g3-flex12">

16

				<h1 class="alpha center reverse">{{ title }}</h1>

17

			</div>

18

		</div>

19

	</header>

20

	<section class="info-hero alt">

21

		<div class="flex">

22

			<div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">

23

				{% if entry.infoHeroTopText %}

24

				<h1 class="delta reverse center subfont">{{ entry.infoHeroTopText }}</h1>

25

				{% endif %}

26

27

				{% if entry.infoHeroBottomText %}

28

				<p class="epsilon center reverse">{{ entry.infoHeroBottomText }}</p>

29

				{% endif %}

30

31

			</div>

32

		</div>

33

	</section>

34

	<section class="alt">

35

		<div class="flex">

36

			<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">

37

				{% if entry.firstSectionHeader %}

38

				<h1 class="beta center">{{ entry.firstSectionHeader }}</h1>

39

				{% endif %}

40

41

				{% if entry.firstSectionSubheader %}

42

				<p class="delta center subfont caps">{{ entry.firstSectionSubheader }}</p>

43

				{% endif %}

44

			</div>

45

		</div>

Tipos de Sección

Los sitios de Craft se construyen alrededor de las secciones que hemos descrito anteriormente: Singles, Canales y Estructuras. Aquí hay un breve video que muestra los tipos de sección con más profundidad:

Aquí están las secciones asociadas con el sitio de demostración de Happy Lager—observe cómo cada una corresponde a la barra de navegación principal.

Las paginas  de inicio y Acerca de son Singles. La página Noticias y Trabajo son Canales. La página Servicios es una Estructura.

Por supuesto, Craft también ofrece categorías y etiquetas. Las categorías le ayudan a organizar el contenido de su sitio antes de tiempo, mientras que las etiquetas le permiten crear una Folcsonomía ad hoc basada en el contenido de cada uno de sus artículos.

Este es un breve video que describe categorías y etiquetas:

Otra característica interesante que Craft ofrece es la capacidad de encaminar las solicitudes de URL mediante rutas amigables directamente a secciones específicas:

Una mirada más profunda a las páginas de Happy Lager

Aquí está la página de What's On Tap de http://happylager.dev/index.php/work:

Aquí está un vistazo a la página de Servicios—Cómo se hace en http://happylager.dev/index.php/services. Es una estructura cuyos elementos tienen un orden predefinido.

Cada uno de los cuadros de imagen es manejado por una entrada en servicios. Puede cambiar su orden de apariencia mediante arrastrar y soltar:

He aquí un ejemplo de plantilla Twig para esta página:

1

{% extends "_layouts/site" %}

2

3

{% block main %}

4

5

    <header class="alt">

6

		<div class="flex">

7

			<div class="g1-flex4 g2-flex6 g3-flex12">

8

				<h1 class="alpha center reverse">{{ title }}</h1>

9

			</div>

10

		</div>

11

	</header>

12

13

	{% for entry in craft.entries.section('Services').find() %}

14

	<div class="flex">

15

		<div class="g1-flex4 g2-flex6 g3-flex12">

16

			<p class="delta alt">

17

				<a href="{{ entry.url }}">

18

					{{ entry.title }}

19

				</a>

20

			</p>

21

		</div>

22

	</div>

23

	{% endfor %}

24

25

{% endblock %}

Y aquí está la plantilla para cada entrada. Esto le da una idea de cómo construir plantillas de Twig para su sitio Craft y lo que implica:

1

{#

2

 # Services entry template

3

 # -------------------

4

 #

5

 # This template gets loaded whenever a Work entry’s URL is

6

 # requested. That’s because the Work section’s Template setting is

7

 # set to “services/_entry”, the path to this template.

8

 #}

9

10

{% extends "_layouts/site" %}

11

12

{% block main %}

13

  {% set currentUrl = craft.request.getUrl() %}

14

  {% set lastSegment = craft.request.getLastSegment() %}

15

  {% if lastSegment != 'services' %}

16

    <nav class="subnav">

17

      <div class="flex">

18

        <div class="g1-flex4 g2-flex6 g3-flex12">

19

          <ul>

20

            {% for entry in craft.entries.section('Services').type('servicesDetail').find() %}

21

            <li>

22

              <a href="{{ entry.url }}" class="{% if entry.url == currentUrl %}current{% endif %} subfont caps">

23

                {{ entry.title }}

24

              </a>

25

            </li>

26

            {% endfor %}

27

          </ul>

28

        </div>

29

      </div>

30

    </nav>

31

  {% endif %}

32

33

  {% if lastSegment == 'services' %}

34

35

    <header class="alt2">

36

      <div class="flex">

37

        <div class="g1-flex4 g2-flex6 g3-flex12">

38

          <h1 class="alpha center reverse">{{ entry.title }}</h1>

39

        </div>

40

      </div>

41

    </header>

42

43

    <section class="alt">

44

      <div class="flex">

45

        <div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">

46

          {% if entry.indexHeading %}

47

            {{ entry.indexHeading }}

48

          {% endif %}

49

        </div>

50

      </div>

51

    </section>

52

53

    <section>

54

      <div class="flex">

55

        {% for entry in craft.entries.section('Services').type('servicesDetail').order('postDate desc').find() %}

56

          <div class="g1-flex4 g2-flex2 g3-flex4">

57

            <a href="{{ entry.url }}" class="services-entry-wrap">

58

              {% set image = entry.featuredImage.first() %}

59

              {% if image %}

60

                <img src="{{ image.getUrl('thumb') }}" alt="image.title"/>

61

              {% endif %}

62

              <h3 class="center">{{ entry.title }}</h3>

63

              {% if entry.shortDescription %}

64

                {{ entry.shortDescription }}

65

              {% endif %}

66

            </a>

67

          </div>

68

      {% endfor %}

69

    </div>

70

    {% else %}

71

      {% include "includes/articlebody" %}

72

73

    {% endif %}

74

  </section>

75

76

  {% if lastSegment != 'services' %}

77

  <section class="service-points">

78

    {% for block in entry.servicesBody %}

79

    <div class="flex">

80

      <div class="service-point">

81

        <div class="g1-flex4 g2-flex3 g3-flex4">

82

          <h4>{{ block.heading }}</h4>

83

          {{ block.text }}

84

        </div>

85

        <div class="g1-flex4 g2-flex3 g3-flex8">

86

          {% set photo = block.image.first() %}

87

          {% if photo %}

88

          <img class="" src="{{ photo.url }}" alt="{{ photo.title }}">

89

          {% endif %}

90

        </div>

91

      </div>

92

    </div>

93

    {% endfor %}

94

  </section>

95

96

  <section class="services-work-entry">

97

      {% set entries = craft.entries.section('Work').limit(1).offset(2) %}

98

      {% for entry in entries %}

99

      {% set asset = entry.featuredImage.last() %}{% if asset %}

100

      <div style="background-image: url('{{ asset.url }}')">

101

      {% endif %}

102

      <div class="flex">

103

        <div class="g1-flex4 g2-flex3 g3-flex6">

104

            <a href="{{ entry.url }}">

105

              {% set asset = entry.featuredImage.first() %}{% if asset %}

106

              <img src="{{ asset.url }}" alt="{{ asset.title }}" width="616" height="204">

107

              {% endif %}

108

            </a>

109

        </div>

110

        <div class="g1-flex4 g2-flex3 g3-flex6">

111

          <div class="summary-wrap">

112

            <h2 class="callout-border"><a href="{{ entry.url }}">{{ entry.title }}</a></h2>

113

            <h3><a href="{{ entry.url }}">{{ entry.heading }}</a></h3>

114

            {% if entry.subheading %}

115

            <p>{{ entry.subheading }}</p>

116

            {% endif %}

117

            <p><a href="{{ entry.url }}" class="view-more hero-cta">View More</a></p>

118

          </div>

119

        </div>

120

      </div>

121

    </div>

122

    {% endfor %}

123

  </section>

124

  {% endif %}

125

126

127

{% endblock %}

128

129

130

{% block foot %}

131

  {{ parent() }}

132

  <script type="text/javascript" src="/assets/lib/shapes-polyfill.min.js"></script>

133

{% endblock %}

Edición de entradas

Edición de entradas en Craft es simple, al igual que WordPress, pero con capacidades de diseño mejorado que normalmente se requieren plugins para lograr.

Cada sección puede tener varios tipos de entrada definidos por el usuario. Por ejemplo, la sección de noticias aquí tiene dos tipos diferentes de entradas: artículos y enlaces. Los tipos de entrada permiten almacenar diferentes tipos de contenido en la misma sección.

Aquí hay un breve video sobre Tipos de entrada:

Ahora que tiene una idea de cómo funciona la construcción del sitio en Craft, vamos a instalar una nueva versión desde cero.

Instalación de Craft desde cero

Para instalar Craft, visite el sitio web y descargue la base de código. Estoy usando Mac OS X con MAMP para mi desarrollo local y pruebas.

Craft proporciona instrucciones detalladas de instalación y enlaces a guías para Mac, Laravel, Heroku e incluso una instalación automatizada con Composer.

Cambie el nombre del archivo htaccess:

1

cd ~/Sites/craftcms/public

2

mv htaccess .htaccess

Cree un enlace simbólico a su directorio público de Craft para MAMP:

1

ln -s ~/Sites/craftcms/public /Applications/MAMP/htdocs/craft

Si ejecuta la instalación de Craft localmente desde los nombres de host "craft.dev" o "ontherocks.dev", tendrá la opción de cambiar entre Craft Personal, Craft Client y Craft Pro de forma gratuita, para siempre.

He creado la base de datos a través de PHPMyAdmin.

Edite el archivo de configuración de la base de datos de Craft para sus credenciales de MySQL:

1

nano ./craft/config/db.php

Ingrese sus credenciales en los siguientes campos:

1

/**

2

 * Database Configuration

3

 *

4

 * All of your system's database configuration settings go in here.

5

 * You can see a list of the default settings in craft/app/etc/config/defaults/db.php

6

 */

7

8

return array(

9

10

        // The database server name or IP address. Usually this is 'localhost' or '127.0.0.1'.

11

        'server' => 'localhost',

12

13

        // The database username to connect with.

14

        'user' => 'root',

15

16

        // The database password to connect with.

17

        'password' => 'your-password',

18

19

        // The name of the database to select.

20

        'database' => 'craft',

21

22

        // The prefix to use when naming tables. This can be no more than 5 characters.

23

        'tablePrefix' => 'craft',

24

25

);

Configurar permisos de escritura para estos directorios de aplicacion de Craft:

1

chmod 744 ./craft/app

2

chmod 744 ./craft/config

3

chmod 744 ./craft/storage/

Visite la página local de Craft y ¡debe ver a los monos de nuevo!

Registre su cuenta inicial de administración:

Configure las propiedades del sitio:

Y eso es todo:

Aquí está su panel de control nuevamente:

Craft es tan centrado en el usuario final que incluyen un formulario de contacto de soporte en la página principal de su panel de control.

Puede encontrar la configuración del sitio desde la barra de navegación en la parte superior derecha. Me recuerda algo de iOS:

Esto es lo que se ve en su sitio de Craft por defecto cuando comienza:

Sí, Craft no tiene la comunidad de temas de WordPress. Para la mayor parte, tiene que codificar su propio tema. Para el principiante, WordPress todavía tiene una ventaja.

Por otro lado, ya puede notar cuán rápido se ejecuta Craft en comparación con WordPress.

¿A dónde ir desde aquí?

Ciertamente, puede comenzar a crear el contenido de muestra de su sitio, pero tendrá que aprender sobre temas y complementos de Craft. Estos son algunos recursos que le ayudarán:

• Descripción de plantillas de Craft
• Introducción a Plugins de Craft
• Directorio de complementos de Straight Up de Craft (Sitio de terceros)
• Directorio de Consultores de Straight Up Craft
• Sigue a @CraftCMS en Twitter

Le recomiendo que instale Craft y explore su conjunto de funciones más. Estoy emocionado por el poder, control y escalabilidad Craft ofrece como una alternativa a WordPress. También soy un aficionado de Yii y es genial ver una herramienta de CMS construida sobre mi framework favorito.

Si desea ver una serie de seguimiento sobre la publicación con Craft, por favor, publique una nota en los comentarios. También aprecio sus preguntas y comentarios y generalmente respondo. Puede contactarme en Twitter @reifman o enviarme un correo electrónico directamente.

También quiero dar una mencion a Brandon Kelly, propietario de Pixel & Tonic, los creadores de Craft. Brandon fue muy amigable para responder a mis preguntas y me dio una vista previa de su nuevo sitio de demostración que ahora puede acceder.

Enlaces relacionados

• El sitio web de Craft CMS
• Video Tutoriales de Craft CMS
• Introducción al Framework Yii (Tuts+)
  
• Diez razones por las que nos encanta Craft
• Pixel & Tonic, Creadores de Craft