Mini Post: Teletrabajo.
- Posted in Novedades, tecnologia
- Comments 0
Un excelente informe sobre el teletrabajo o freelance…
Un excelente informe sobre el teletrabajo o freelance…
Siguiendo la línea del tutorial hoy les voy a mostrar cómo crear su propio plugin de Slide de imágenes con jquery.
Primero que nada, vamos a comenzar de “0”, creamos una carpeta en el wp-content/plugins con el nombre “miplugin”, dentro creamos 2 carpetas mas: “js” e “images”. De modo que nos quede el árbol de la siguiente manera:
Wp-content
Plugins
miplugin
js
images
Dentro de “miplugin” creamos un archivo php para nuestro plugin llamado “miplugin.php” y colocamos en la carpeta “js” el archivo “simplegallery.js” y las siguientes imágenes:
Con todo esto ya comenzamos con el código y la explicación va en los comentario:
<?php
/*
Plugin Name: Mi Plugin de Slide
Plugin URI: http://www.claudiomarrero.com.ar
Description: Este es un ejemplo de cómo crear un plugin para slide de fotografías
Author: Claudio Adrian Marrero – Ultima Milla S. A.
Version: 1.3
Author URI: http://www.claudiomarrero.com.ar/
*/
//Definimos la ubicación de nuestros archivos js
define(‘JS’,get_bloginfo(‘url’).’/wp-content/plugins/miplugin/js/’);
//Definimos la ubicación de nuestras imágenes para el slide
define(‘IMAGES’,get_bloginfo(‘url’).’/wp-content/plugins/miplugin/images’);
// cargando jquery de google en wordpress
function miplugin_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’,
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ’1.3.2′);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘miplugin_jquery’);
//Cargamos a la función wp_head(); el archivo simplegallery.js
function miplugin_simpleGalery(){
echo ‘<script type=”text/javascript” src=”‘.JS.’simplegallery.js” />’;
}
add_action(‘wp_head’, ‘miplugin_simpleGalery’);
//Buscando las imágenes para el slide
function miplugin_imagenes(){
//En vez de buscar un directorio, puedes cargar las imágenes en un array
$dir_imagenes = ‘wp-content/plugins/miplugin/images’; //Ubicación absoluta $dir_imagenes_relativas = “/wp-content/plugins/miplugin/images”; // Ubicación relativa
$comienza_solo = “true”; //Si deseas que comience en forma automática
$pausa = 2500; //Tiempo de espera
$transicion = 500; //Transicion entre imagen e imagen.
$maximo_ancho = false;
$maximo_alto = false;
if($ver_imagen = opendir($dir_imagenes)){
while (false !== ($imagen = readdir($ver_imagen))) {
if ($imagen != “.” && $imagen != “..”) {
$array_imagenes .= ‘["'.$dir_imagenes_relativas.'/'.$imagen.'","",""],’;
list($ancho, $alto) = getimagesize(“$dir_imagenes/$imagen”);
if($ancho > $maximo_ancho){$maximo_ancho = $ancho;}
if($alto > $maximo_alto){$maximo_alto = $alto;}
}
}
closedir($ver_imagen);
}
$array_imagenes = substr($array_imagenes,0,-1);
echo ‘<script>
var mygallery = new simpleGallery({
wrapperid: “miplugin_slide”,
dimensions: ['.$maximo_ancho.','.$maximo_alto.'],
imagearray: ['.$array_imagenes.'],
autoplay: ‘.$comienza_solo.’,
persist: false,
pause: ‘.$pausa.’,
fadeduration: ‘.$transicion.’,
oninit:function(){
},
onslide:function(curslide, i){
}
})
</script>
>’;
}
add_action(‘wp_head’, ‘miplugin_imagenes’);
//Function que muestra en el theme de wordpress el slide;
function miplugin_slide(){
echo ‘<div id=”miplugin_slide”></div>’;
}
?>
Bueno con todo esto ya tienes para hacer el plugin que quieras, en la cuarta entrega, vamos a ver como hacer para cargar las imagenes directamente desde el panel de administracion, para que tu plugin sea totalmente administrable.
Si quieres puedes descargar el plugin completo desde aqui
Saludos
La verdad flor de cagaso me pego si me llega a perseguir una mesa…
Esto es ideal para las “Espiritistas”…
Siguiendo el tutorial de cómo crear un plugin hoy voy a ser un poco más aburrido:
Definición de WordPress Plugin:
Un plugin de WordPress es un programa, o un conjunto de una o más funciones, escrita en PHP, que agrega un conjunto específico de funciones o servicios de WordPress.
WordPress Plugins permiten una fácil modificación, personalización y mejora de su WordPress. En lugar de cambiar la programación núcleo de WordPress, puedes agregar funcionalidades con plugins.
Cosas a tener en cuenta antes de comenzar a programar:
Darle una identidad única:
Es posible que si estas creando un plugin luego quieras compartirlo en la comunidad de wordpress por ende, debes intentar colocarle un nombre original, un nombre que identifique perfectamente a lo que hace el plugin que has creado.
Definir un prefijo para las funciones:
Si eres programador en php, esto ya lo sabrás, pero si no ten en cuenta que no puedes definir dos veces una misma función, por ende cuando creamos las funciones es importante para evitar conflictos futuros, utilizar un prefijo, por ejemplo, si tengo una función de carga de un formulario y mi plugin se llama “miplugin”, entonces la función la llamare miplugin_formCarga();, de esta manera evitas cualquier tipo de conflicto con otros plugins o con el mismo núcleo de wordpress.
A lo práctico:
En el último post sobre plugins de wordpress explicaba cómo crear un menú en el panel de administración de wordpress y un par de cosas más, ahora te mostrarte como crear submenúes:
Sub menú de wordpress:
Para crear un submenú le agregaremos a la función que creamos antes de miplugin_menu() la función add_submenu_page();
Así nos quedaría la función:
function miplugin_menu(){
add_menu_page(miplugin, ‘Mi Plugin’, 8, ‘ miplugin ‘, ‘miplugin_funcion’);
add_submenu_page( ‘miplugin’, ‘Sub Menú’, ‘ Sub Menú ‘, 9, ‘page-sub-menu’, ‘miplugin_subfunction’);
}
En el próximo tutorial, viene como eliminar elementos del menú del panel de administración, y como crear un slider de fotografías con jquery autoadministrable.
Sigue pendiente subir mis plugins para que los puedan descargar…
Excelente video visto en el facebook de Fabricio Mena
WordPress esta divido en 3 carpetas wp-admin, wp-content, wp-includes
Abrimos la carpeta wp-content, dentro del mismo encontramos 2 carpetas, plugins y themes, y si tu wordpress está en español seguramente encontremos la carpeta languajes.
Abrimos la carpeta plugins, creamos una carpeta con el nombre que le queramos dar al plugin en este caso usaremos miplugin…
Dentro de la carpeta creamos un archivo miplugin.php que contendrá todo el código de nuestro plugin.
Decirle a wordpress que esto es un plugin:
Abrimos el archivo miplugin.php y colocamos:
<?php
/*
Plugin Name: Mi Plugin
Plugin URI: http://www.claudiomarrero.com.ar
Description: Este es mi primer plugin.
Author: Claudio Adrian Marrero – Ultima MIlla S. A.
Version: 1.0
Author URI: http://www.claudiomarrero.com.ar/
*/
?>
Estas líneas le dicen a wordpress todo lo que tiene que saber sobre el plugin en cuestión, autor, versión, web donde se encuentra alojad, etc.
Todo lo que sigue a continuación se basa solamente en conocer un poco el core de wordpress y tener un conocimiento avanzado en php, aunque si eres principiante, esto te dará una gran ayuda:
//Agregar un menú al panel de administración.
function miplugin_menu(){
add_menu_page(miplugin, ‘Mi Plugin’, 8, ‘ miplugin ‘, ‘miplugin_funcion’);
}
add_action(‘admin_menu’, ‘ miplugin_menu ‘);
//Ahora creamos la función que llamamos desde el menú
function miplugin_funcion(){
echo ‘Este es mi plugin’;
}
Esta función la podemos llamar desde el theme, o cómo ves en este ejemplo, en el mismo administrador de wordpress.
Y listo ya tenemos un plugin creado, ahora claro, esto mucho no nos sirve, solo hay que dejarse llevar por la imaginación y crear lo que nos sintamos capaces, prácticamente no existen límites a la hora de crear un plugin para wordpress.
En los próximos post, explicare como crear submenúes y con algún ejemplo más práctico, dejo pendiente subir mis propios plugins que ido creando a medida que voy desarrollando aplicaciones para wordpress.
Excelente video donde se puede apreciar claramente que la inteligencia vence al deportista…
3×3 from Nuno Rocha on Vimeo.
Aunque Internet, Hollywood y la sociedad en general quieran hacernos ver lo contrario con sus sátiras y estereotipos, los geeks también se enamoran, y no siempre involucra un holograma o algún tipo de conjuro de amor. De hecho, las situaciones más cómicas y delirantes provienen del mundo real, cuando un geek, nerd, o como prefieran llamarlo, ingresa en una relación romántica, con todo lo que esto misma implica. Estos son algunos momentos que un geek puede vivir cuando encuentra a su chuchu, cualquier parecido con la realidad es meracausalidad.
Si si, lo se, se que esto muchos lo saben hacer, pero me decidi a postearlo por que es algo que muchos amigos que recién se inician me han estado preguntando…
Para conectarte una base de datos mysql:
Archivo: conexion.php
Esto es algo sencillo primero el código, después explico cómo funciona:
Index.html
<div id=”hoja” class=”hoja”>
Esto va centrado
</div>
Como verán en el HTML es solo un div llamando a la clase del style “.hoja”.
Style.css
.hoja
{
Position: absolute;
Width: 980px;
Height: 500px;
Left: 50%
Margin-left:-490px;
Border: #000000 solid thin;
}
Explicando la clase:
Posición absoluta para que podamos ubicarla libremente dentro de la hoja, le damos un tamaño con width y height, luego ubicamos el div en el centro de la pagina con el left: 50% y le quitamos la mitad del tamaño del width con margin-left… listo, tenemos un div centrado en el medio de la pagina, ahora solo falta maquetar la web dentro del div y listo…