Desarrolladores
Desarrolladores
Al desarrollar temas, lo mejor es hacerlo en un entorno idéntico al servidor de producción que finalmente alojará su instalación de Weby+.
Para desarrollar temas de Weby+, debe configurar un entorno de desarrollo adecuado. Para comenzar, necesitará un servidor local y un editor de texto.
El siguiente paso es la instalación del sistema Weby+. Si ya instaló y configuró el Sistema Weby está listo para trabajar su primer tema Weby+.
Por defecto el Sistema Weby+ viene con un tema de instalación predeterminado el cual está listo para mostrar toda la información que almacene en el sistema Weby+, a través del yPanel. Este tema predeterminado puede ser reemplazado por nuestro propio tema, ajustado a nuestras necesidades.
Weby+ ofrece las herramientas necesarias para crear un tema Weby+ propio e instalarlo como sitio web predeterminado del sistema Weby+.
A continuación se mostrarán los pasos necesarios para crear la pagina de inicio de primer tema Weby+
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.
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 infoDat.inf. Para mantener las cosas organizadas, crea 2 nuevas carpetas llamada 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 | |-- infoDat.inf
El archivo infoDat.inf es esencial. Sin el, tu plantilla no será reconocida 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 2.0.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 2020, 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 infoDat.inf 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.
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; }
.menu{list-style:none;}
.menu li{display:inline-block;margin-right:10px;}
#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>
* Si necesita ayuda con funciones específicas, puede encontrar esa información en la referencia del código
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).
El último paso es instalar nuestra plantilla, para ello nos dirigimos a nuestro yPanel y en la sección APARIENCIA SITIO WEBY ⇒ Mis plantillas podremos instalar nuestro nuevo tema Weby+. Después de instalarlo lo seleccionamos como predeterminado y nuestro sitio web se visualizará como nuestro nuevo tema predeterminado.
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.