Documentación - Manual Weby+

Referencia de Lenguaje


Trabajando mi primer tema Weby+

Si ya instalaste y configuraste tu Sistema Weby+ estás listo para crear tu primer tema Weby+.

Por defecto el Sistema Weby+ viene con un tema de instalación predeterminado el cual lo puedes editar a través de tu yPanel, pero Weby+ te ofrece la herramientas necesarias para crear tu propio tema Weby+ e instalarlo como sitio web predeterminado de tu sitio Weby+.

A continuación se mostrarán los pasos necesarios para crear la pagina de inicio de primer tema Weby+

1. Conocimientos previos

Debes tener dominio de las dos herramientas básicas de la maquetación web: HTML5 y CSS3 y responsive web design. La idea es que nuestro sitio se adapte correctamente a cualquier dispositivo conectado a Internet.

Y aunque no es necesario, es recomendable que tengas nociones básicas de PHP o que al menos estés familiarizado con su sintaxis.

2. Configuración de la estructura de directorios

Para hacer una tema o plantilla muy básica, crea una nueva carpeta (ej. MiPrimerTema_Webyplus). El nombre de esta carpeta debe ser el mismo que tu tema de instalación, mas adelante veremos con detalle este punto.

Utilizando tu editor de texto favorito, crea los archivos index.php y wy_info.wyd. Para mantener las cosas organizadas, crea 2 nuevas carpetas llamadaa images y css. Dentro de la carpeta css crea un archivo llamado styles.css.

Aunque, para empezar, está bien colocar todos tus códigos CSS directamente en tu archivo index.php, muchos desarrolladores web prefieren colocar su código CSS en un archivo independiente que pueda ser enlazado desde varias páginas con la etiqueta link. Esto también puede acortar el tiempo de carga de tus páginas, ya que el archivo separado se pueden almacenar en caché.

Esta es la configuración de instalación más básica. Esquema de la estructura de carpetas y archivos:

|-- MiPrimerTema_Webyplus/
|   |-- css/
|   |   |-- styles.css
|   |-- images/
|   |-- index.php
|   |-- wy_info.wyd

3. Crear un archivo wy_info.wyd básico

El archivo wy_info.wyd es esencial. Sin el, tu plantilla no será reconcida por Weby+. El archivo tiene claves acerca del tema o plantilla.

La sintaxis del archivo puede variar para cada versión de Weby+.

Para Weby+ 1.8.x, utiliza el siguiente:

;Mi primer tema básico diseñado para Weby+
[Instalacion]
Nombre = MiPrimerTema_Webyplus
UrlTema = http://www.ejemplo.com
Version = 1.1.0
Autor = Tu Nombre
AutorUrl = http://www.ejemplo.com
Descripcion = Este es mi primer tema básico.
Copyright = Copyright 2017, Tu_Nombre
Licencia = Yal Publicidad

Así que, como puedes ver, tenemos un conjunto de información. Tu mejor opción es copiar y pegar esto en tu archivo archivo wy_info.wyd y modificar los detalles:

Nombre

Debes colocar el mismo nombre de la carpeta contenedora de tu tema Weby+.

UrlTema

Desde ésta opción puedes incluir la url donde encontrarán información sobre tu tema Weby+.

Versión

Esta opción te permitirá actualizar tu tema Weby+.

AutorUrl

Esta opción te permiten acceder a tu información de autor.

Descripción

Esta opción te permite agregar descripción sobre tu tema Weby+.

Copyright

Esta opción te permite agregar tu derechos de autor.

4. Crear un archivo index.php básico

El archivo index.php es el núcleo principal de tu tema Weby+. Esencialmente, haces una página como cualquier página HTML, pero colocas código PHP Weby+ donde debe ir el contenido de tu sitio web.

Primeras Líneas del index.php

Un tema de Weby+, comienza con las siguientes líneas:

<?php defined('WY_Ini_Weby') or die( 'No dispones de acceso' ); ?>
<!doctype html>
<html lang="es-es">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
</head>
<body>
</body>
<html>

La primera línea, es una instrucción de seguridad en PHP que evita que los intrusos accedan a nuestro código.

La segunda línea, es la declaración del tipo de documento. En este caso, se indica que es un documento HTML5.

En la tercera línea comienza nuestro documento HTML y se describe el lenguaje de la web. Un documento html se divide en dos partes, el encabezado y el cuerpo. El encabezado contendrá la información sobre el documento y el cuerpo va a contener el código del sitio web que controla el diseño.

Encabezado

El encabezado estará dado por las etiquetas <head></head> y dentro ellas incluiremos la información correcta del encabezado. Esto incluye el título de la página, la información meta que serán generados con nuestra información del sitio web y basta con insertar el siguiente código.

<head>
<?php $wy->obt_head(); ?>
</head>

Para agregar tu CSS o JavaScript personalizado, puedes hacerlo de esta manera:

<link rel="stylesheet" href="<?php echo $wy->obt_base(); ?>/css/styles.css">

El código CSS será el siguiente:

body {
	color: #94989b;
	font: 400 14px 'Tinos', serif;
	line-height: 24px;
	letter-spacing: .28px;
}
	a {
			font: inherit;
			color: inherit;
			text-decoration: none;
	  		-moz-transition: 0.3s all ease;
	 		-o-transition: 0.3s all ease;
	  		-webkit-transition: 0.3s all ease;
	  		transition: 0.3s all ease;
		}
.contenedor{ overflow: hidden; }
.logo{ float: left; }
.nav{ float: right; }
	.nav a.hover,
	.nav a.activo { color:#036; }

#footer {
		background: #3d4140;
		color: #fff;
	}
#header,
#contenido,
.pie_pagina {
		color: inherit;
		margin: 0px auto;
		width: 990px;
}

Cuerpo

En esta sección deberás agregar el siguiente código PHP que mostrará toda la información de tu sitio web.

<body>
<header id="header">
	<div class="cotenedor">
		<div class="logo">
			<?php if( file_exists( 'images/logo.png' ) ) : ?>
			<img src="images/logo.png" alt="Weby+" />
			<?php else : ?>
			<h1><?php echo $wy->obt_solo_titulo(); ?></h1>
			<?php endif; ?>
         	</div>
         </div>

         <nav class="nav">
                <?php echo $wy->obt_menu( '_top', 'class="menu"' ); ?>
         </nav>
</header>
<section id="contenido">
<?php $sql = $wy->obt_contenido(); while( $row = query_array( $sql ) ): ?> <div class="sbt"><strong><?php echo utf8_encode( $row['titulo'] ) ?></strong></div> <div><?php echo utf8_encode( $row['texto'] ) ?></div> <?php endwhile; ?> </section> <footer id="footer"> <div class="pie_pagina"> <div> <span><?php echo $wy->obt_direccion(); ?><br> <span><?php echo $wy->obt_telefono(); ?></span><br> <span><?php echo $wy->obt_email(); ?></span> </div> <div><?php $wy->obt_CopyRight(); ?></div> </div> </footer> </body>

Finalizamos el sitio web con esta última etiqueta

</html>

5. Empaquetar la plantilla para la instalación

Un directorio con varios archivos sueltos no es un paquete conveniente para la distribución. De modo que el último paso es hacer un paquete de instalación. Este es un archivo comprimido que contiene la estructura de directorio y todos los archivos, en formato ZIP (con una extensión .zip).

6. Probar la plantilla

El ultimo paso es instalar nuestra plantilla, para ello nos dirigimos a nuestro yPanel y en la sección TEMAS WEBY+ -> Ver todos los temas podremos instalar nuestro nuevo tema Weby+. Después de instalarlo lo seleccionamos como predeterminado y nuestro sitio web se visualizará con nuestro nuevo tema creado.

Ahora deberías haber creado una plantilla que funciona. No parece gran cosa, aún. Lo mejor que puedes hacer ahora es empezar a experimentar con el diseño.