Codex function add_editor_style()
WPBeginner Tutorial: How to Add Custom Styles to WordPress Visual Editor
Back in 2011 Smashing Mag post about Advanced Layout Templates for content editor in WordPress
Categoría: themes
themes
Gracias a @PalmaActiva tengo la oportunidad de ofrecer a desarrolladores web un seminario de 13 horas sobre la creación de Temas para WordPress a medida, desde cero, usando un diseño. Para el seminario he creado un temario con los temas mas importantes a tratar.
Participa en el seminari impartit per @lonchbox sobre creació i disseny de temes en WordPress http://t.co/QJh8fsGNmR
— PalmaActiva (@PalmaActiva) May 16, 2014
Temario de PalmaActiva en Catalán y Castellano:
Puedes apuntarte aquí!, hay plazas limitadas.
Warning: Use of undefined constant img_url - assumed 'img_url' (this will throw an Error in a future version of PHP) in /srv/www/u3074/wp-content/plugins/media-files-tools/media-files-tools.php on line 312
El pasado Jueves (16/01/2013) di una charla sobre planificación y gestión de proyectos, para la charla me basé en los posts sobre el Jefe de Proyecto Fantasma para al final explicar que es posible crear con WordPress un gestor de tareas, o mejor dicho, un muro de trabajo bastante sencillo y fácil de usar.
Llegamos a usar esta opción de software después de haber probado basecamp, teambox, también probamos adaptar otro tipo de software para usarlo como gestor de tareas, como evernote o un simple gestor de tareas como wunderlist. El mayor problema era que no todo el mundo es apto para estos entornos, hay personas mas habituadas al uso de sistemas mientras que otras se ven sobrepasadas mas allá de un word, además del mal uso que se hace del email como gestor de tareas. Otro punto importante eran los archivos compartidos, se use la herramienta que se use estos terminaban siendo enviados por dropbox, google drive, FTP, email o en un USB, con lo que si la herramienta de gestión no facilitaba la inclusión de archivos y su gestión, pues terminaba siendo inutil. También estaba el tiempo de aprendizaje, teambox es uno de los mejores gestores, muy completo en cuanto al control de tiempos, estado de tareas y organización, además de conectarse con dropbox y otros servicios de terceros, pero lleva tiempo para aprender a usar en su totalidad para poder sacarle provecho a esa herramienta.
La conclusión que saqué al trabajar con diferentes equipos, con diferentes conocimientos y tiempo es que hacía falta algo tan fácil como el muro de facebook para poder centralizar las conversaciones. Soy un usuario activo en el foro de wordpress, en inglés :P, y en los muros de make.wordpress.org y fué ahí donde vi la luz.
Para crear este gestor de tareas usaremos, un Theme, unos cuantos plugins y la opción de WordPress Multisite.
El theme que permite crear éste muro se llama P2 Theme, en concreto facilita la creación de entradas desde el frontend, es decir, sin entrar en el backend o escritorio de WordPress, una vez se publican estas entradas se añaden mediante AJAX con lo que ves su publicación inmediata acompañada de unos avisos visuales para todos los miembros que están conectados al muro en ese momento. Estas entradas utilizan los posts formats Status, Post, Quote & Link. Mejor un video para explicar como funciona P2.
Puedes descargar P2 desde el respositorio de WordPress.org o instalarlo desde el instalador de Themes en el backend de WordPress.
Pero claro, P2 por si solo no deja de ser un muro o mini blog tipo twitter, para añadirle las funcionalidades básicas de un gestor de tareas usaremos estos plugins:
1. Plugin: P2 Resolved Posts
Este plugin permite marcar una entrada como resuelta en color verde o sin resolver en color rojo, además ofrece un historial con datos de usario, fecha y hora en la que la entrada cambió de estado.
2. Plugin: Who´s Online
Este plugin añade un widget nuevo, el cual muestra los usuarios que están conectados en ese momento al muro y cuanto tiempo llevan sin entrar en él.
3. Plugin: P2 by EMail
Aunque queramos el email sigue dominando, por ello este plugin añade un control en el envío de notificaciones por email, estas notificaciones son sobre la actividad que tiene el muro, nuevas entradas, comentarios y menciones. Estas últimas, menciones, funcionan como en twitter, si alguien escribe el nombre de un usuario precedido por una @ automáticamente se convierte en un link que filtra todas las menciones a ese usuario.
Para controlar esas notificaciones por email el plugin añade un panel en el perfil del usuario.
4. Plugin: Restricted Site Access
Acceso restringido, al crear un muro de trabajo donde están los miembros de un equipo donde los cuales publican información confidencial o datos de accesso a FTPs, Bases de Datos, etc, lo importante es proteger esa información, si se usa un WordPress con P2 Theme sin ninguna protección estos datos serán totalmente visibles ademas de indexables para Google. Por ello el uso de este plugin es Obligatorio.
Al activar este plugin podemos controlar el acceso de diferentes formas, tan solo debéis acceder a Configuración -> Lectura.
5. Plugin Extra: P2 Likes
Desde hace tiempo que estamos habituados a valorar el contenido que encontramos en internet, Me gusta en Facebook, Favoritos en Twitter, Etc. Este plugin añade un link con el cual podemos macar que nos gusta una entrada o un comentario. De esta manera trasmitir al equipo de una forma sencilla que estás de acuerdo con esa opinion o tarea.
Configuración de WordPress
Para que nuestro muro funcione sin problemas recomiendo que Configuración -> Comentarios de tal forma que se habiliten para todos los usuarios registrados y con acceso a ese muro.
Recomiendo utilizar estos muros en modo Multisite con subsite en modo carpeta, para así centralizar todos los proyectos o clientes en una solo instalación de WordPress, pero cada una por separado. Para ello es importante definir estos parámetros en el panel de control de la red. Esto os permitirá gestionar varios proyectos bajo un mismo dominio ej: wall.lonchbox.com/cliente1, wall.lonchbox.com/proyectoA, wall.lonchbox.com/appcliente1
Gracias a todos los que fuisteis a la charla en Palma Activa y si tienen alguna duda sobre como poner en marcha el muro de trabajo con WordPress dejar un comentario en esta entrada y encantado os ayudaré :)
Desde hace unos meses me he aficionado a Less. ¿Pero que es Less? es método para hacer hojas de estilos dinámicas, es decir que podemos crear una especie de CSS dinámico. Lo que pasa es que Lees en si no es interpretado ni por el navegador o el servidor ya que necesita ser compilado para crear un CSS.
Lo bonito de este lenguaje es como puedes simplificar el trabajo agregando variables, algo que siempre se hecha en falta en CSS, pues tambien despiezar una hoja de estilso en varios archivos y estos al final crean un solo CSS, validad y comprimido.
Ahora, por mis capacidades limitadas con el tema de configuración de servidor o compiladores preferí no romperme la cabeza e ir por lo seguro, encontré un compilador de Less llamado Codekit, lamentablemente está solo para MAC, vale la pena, compila, revisa, valida y hace un minify, osea comprime, el CSS resultante, Codekit te permite decidir donde quieres guardar el archivo comprimdo además de otras funcionalidades como optimización de imágenes donde lo que hace es eliminar toda la META información del archivo de imagen, también compresión y validación de Js.
Lo único que no he logrado controlar es que en el caso de WP, el style.css necesita unas lineas comentadas en el inicio para contener la información del theme, como nombre, url, descripción, etc. Less al compilar borra estos comentarios, elimina todas las lineas comentadas con lo que claro el archivo queda mas limpio. La única solución que he encontrado es crear un archivo llamado compiled-styles.css el cual le hago un @import en style.css, de esta forma style.css da la información del Theme pero no tiene ningún estilo dentro.
Ahora, empezar a crear tus propias variables y combinaciones es largo, sobre todo cuando queires que tu CSS sea cross-borwser. Para ello hace poco encontré elements.less, es un archivo que define las variables básicas, como border, border-radius, transparencias, box-shadows, gradients. Un ejemplo:
Des esta manera definiríamos un borde redondeando en CSS:
#some_div {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
Bueno pues en less solo se tiene que escribir:
#some_div {
.border-radius(5px, 0, 0, 5px);
}
Y así hay miles de ejemplos y elements.less es un buen comienzo para entender la estructura y potencial de Less.
El año pasado la WordCamp fue mucho mas sencilla que esta, fuimos pocos, lo que nos permitió preguntar un poco mas y conocernos mejor. Conocí que detrás de ayudawordpress estaba un señor muy joven, ;) @fernandot, que no era programador! algo para mi sorprendente dado los buenos consejos y soporte que da su blog, también que llevaba muuuchos años impulsando y ayudando en los foros de wordpress. Fue también gratificante que un mail te puede poner en contacto con un evento que puede pintar de inaccesibles a sus organizadores, aprendimos que ya en su version 2.8 WP era mas que una forma de hacer blogs y que sobre todo wordpress es una herramienta muy fácil para aprender sobre como funciona el SEO, lastima que como siempre las wifis sean tan impredecibles y no pudimos adentrarnos en lo que es BuddyPress.
Pero en el pasado evento logramos algo importante, llegamos al objetivo que que tenía Zè cuando fué, conseguir que la traducción en castellano se actualizara, hubo una discusión larga de esas que parece que no tienen sentido ni fin, por suerte llegamos a la conclusión que la mayoría usábamos la versión de Fernando Tellado, en ese mismo momento la subieron y por fín! teníamos una versión en nuestro idioma, algo que permitió saber y conocer mejor como se comportan los blogs, osea mejores números para calcular. Una dato importante que en esa ocasión caímos en cuenta, es que si no se mantiene actualizada la traducción con cada versión o actualización de WordPress no podíamos darle al botón de Actualizar Automáticamente desde el Admin.
Todavía necesitamos ayuda para mantenerlo al día, mas info en este link.
Y llegó la Wordcamp 2010 cargada de mejores ponencias y personas interesantes, había la preocupación de que el Espai Jove de la Fontana no tenga espacio para todos los apuntados, pero cupimos todos.
Bueno como escribo fatal he pensado en hacer un resumen real, tomando fotos del album de cavalleto y usando el plugin de Blackbird Pie para tomar los tweets que realicé durante el evento y poder plasmar los tres componentes que suele tener un evento. 1) las ponencias, 2) lo que se dice, 3) el networking.
Por suerte nadie se sentó en la silla de en frente :P
Cosas que quizás no sabías que se pueden hacer con WP por Fernando Tellado (Ver)
Mas allá de los fantásticos ejemplos, Fernando nos demostró que las capacidades de WordPress deben medirse en base a que tipo de información quieren los usuarios de tu cliente, romper el típico formato de un Theme puede ayudar a que el contenido llegue de una mejor forma, no abuses de plugins ni toques la Base de Datos. Y si, WP es sexy! por lo tanto se elegante «Code is Poetry»
[blackbirdpie url=»http://twitter.com/#!/lonchbox/statuses/13516601525538816″]
What’s coming for WordPress por José Fontainhas
Las mejoras en WP son constantes, a veces van demasiado rápido y en parte debemos agradecer a la comunidad que lo soporta. Una de las novedades mas importantes en la versión 3.1 serán los Post Formats e incorporación de mas AJAX en la interfaz del Admin, así ganaremos mucha mas velocidad cuando trabajamos. También una llamada de antención, si hay una actualización y se indica que es importante, tenemos que actualizar, y si le damos al botón para automatizarlo supimos que el sistema desactiva los plugins antes de actualizar y luego los vuelve a actualizar, aunque una copia de FTP y BD no es mala idea ;)
[blackbirdpie url=»http://twitter.com/#!/twittpalma/status/13576479325556736″]
Como sabéis Zè es quien maneja la internacionalización, es decir, las traducciones. Con lo que pude comentarle que sería interesante que hubiera la posibilidad de crear una versión para Baleares, y como todo en Automattic fué cuestión de poco tiempo para que tengamos la opción de empezar a traducirlo. Así que Manos a la obra (link actualizado)
Rethinking Themes por Rafael Poveda
Lo siento Rafa, llegamos tarde después de la pausa para comer. :( Y para compensar puedo comentar que he trabajado con Thematic y Carrington aunque prefiero los ChildThemes soy un fan total, poder evolucionar con el Theme original es brutal, sobre todo con TwentyTen.
[blackbirdpie url=»http://twitter.com/#!/factoriadigital/status/13544538664607744″]
Lo bueno fué que aunque llegué tarde aproveche en el siguiente descanso para enseñarle una idea sobre como se podría potenciar las opciones del viewport para iPad, es decir, cuando cambia de landscape(horizontal) a portrait(vertical), hice la prueba con un script de Matthey James Taylor, pero me supo a poco, charlamos sobre el tema con @mecus y Karim sobre como podría ser un plugin que permita llevar a los Themes de WP a otro nivel sobre este tipo de dispositivos. Una muestra si abres en tu ipad la web de @joanjimenez o @spoonch. Para las pruebas use como web tool ipadpeek
[blackbirdpie url=»http://twitter.com/#!/kardotim/statuses/13668310130368513″]
Taller SEO por Fernando Muñoz (Ver)
Mas allá de aclarar algunas dudas el taller fue bastante básico, se nota que la consultoría no es gratis ;), pero muchos de los asistentes pudieron despejar dudas sobre sus webs y exponerlas a los presentes. Una buena forma de ganar clicks ;)
No soy un experto en SEO, pero entendí que es un mundo muy discutido en donde Google domina y que muchos buscan varias formas de ganar en ese terreno. SEO es para pocos, mi conclusión, muchos datos que mas allá de visitas y clicks se me suelen hacer indescifrables.
[blackbirdpie url=»http://twitter.com/#!/arturomarimon/status/13567355820974081″]
WP como CMS por Luis Rull
Aqui si me lanzé a la piscina, después de la disertación de Luis el pidió ejemplos de algo hecho con WP 3.0 que no sea un blog y con el equipo de @brujula_talk presentamos el proyecto de @youarehotels fué nuestro primer proyecto sobre WP 3.0 multisite, ChildThemes y WPML con 5 idiomas (que por cierto el link de descarga ese día no funcionaba), integramos con ihotelier para el motor de reservas además de facilitar la creación de Ofertas mediante un Post Type y un Custom Field. Para el tema del diseño utilizamos typekit y así dar la opción de usar otras fuentes a los diseñadores. Perdón por el autobombo pero ya que nadie dijo nada pues como siempre el pancho da la nota jejeje!. Espero que haya sido de ayuda para alguien.
[blackbirdpie url=»http://twitter.com/#!/lonchbox/status/13611979356770304″]
WP in your cell phone por Isaac Keyet
La primera ponencia en inglés, pero sorprendentemente fueron pocos los que salieron huyendo, es mas, hubo muchas preguntas. La conclusión es que el tema de las apps en general está muy verde, nos falta experimentarlas mas, y recordar que todo el código de las apps es libre, a quien pueda ayudar nos haría un favor enorme, porque ideas no faltan. Tambien nos comentó que es el creador de Intense Debate, una gran idea que debe ir madurando, sobre todo es mucho mejor que disqus ya que tus comentarios se quedan en tu blog y no se los llevan a otro sitio.
[blackbirdpie url=»http://twitter.com/#!/lonchbox/status/13639829866684416″]
Después de este tweet hablamos un poco sobre el tema de los viewports, pero luego profundizamos en que la app para iPhone & iPad sobre una particularidad la geolocalización ya que la app lo permite pero no sabía como usarlo, claro no busqué bien ni lo he probado así que os dejo una captura de la app y un enlace al plugin necesario para usarlo
Behind the Scenes of Automattic por Karim Osman (Ver)
El tweet que acompaña este resumen es lo que pienso realmente sobre las reuniones, una perdida de tiempo, sobre todo cuando son para «hablar», son útiles pero mejor hacerlo comiendo no?, Este ejemplo demuestra que lo que es gestión, avance y tareas que mejor que tenerlo todo escrito, todo queda escrito. Simple forma de coordinar un equipo que está por todo el mundo (como muchos otros) y que hablan diferentes idiomas. Además de su charla Karim resultó ser un muy bune tipo! :) un placer.
[blackbirdpie url=»http://twitter.com/#!/lonchbox/statuses/13634647372070912″]
WP como plataforma de comercio electrónico por Fernando Serer (Ver)
Nuevamente me la perdí en su mayoría, pero por las palabras de Jesus Cortes fueron bastante útiles. Seguramente Jesus pueda ampliar mas en el blog de su empresa. Y el mejor que nadie podría dar una buena comparación entre WP como ecommerce contra Magento o Prestashop.
[blackbirdpie url=»http://twitter.com/#!/jescortes/status/13655939395620864″]
WooTumblog plugin, post formats and Express App por Jeffrey Pearce (Ver)
Lo que ha logrado la empress de Jeff es fantástico, crean Themes y ahora plugins, muchos de nosotros seguramente hemos usado alguno de sus productos para ver como lo hacen o para saber como hacerlo. Nuevamente a pesar de ser en inglés hubo preguntas, mas de los esperado. Yo me centré en un caso muy concreto sobre un problema con los dropdown menus para un childtheme de The Morning After
[blackbirdpie url=»http://twitter.com/#!/lonchbox/status/13668971882483712″]
Espero que liberen su framework para que los Themers podamos hacer mas cosas y mas rápido.
Taller de creación de plugins por Rocío Valdivia
Aqui empezó lo divertido, ya era un poco tarde pero era la ponente que quería oir desde un inicio, para mi los plugins son pan de cada día, a veces los adoro y otras los odio, pero sobre todo no los entendía, al no ser programador me era imposible conocer su funcionamiento pero llegó Rocío y nos explico todo (con permiso de @bi0xid ;) de una forma super simple, tanto que por fin voy hacer mi primer plugin, una chorrada pero el primero y así saber como avanzar o interpretar otros. Una muestra mas que WP a logrado llevar el conocimiento del código a personas con formación en artes, diseño, comunicación y mas…
[blackbirdpie url=»http://twitter.com/#!/lonchbox/statuses/13677101450268672″]
Cuando lo tenga hecho te lo envío :)
Y así fuimos trending topic
[blackbirdpie url=»http://twitter.com/#!/lonchbox/status/13957131573133313″]
Espero que este resumen os sea entretenido, no sé si útil pero si es una visión y experiencia muy personal de como vive y trabaja la comunidad de WordPress, dinámica, abierta, joven, no tan joven, diversa pero sobre todo personas. Seguro en un congreso de Matemáticas o Joomla no se lo pasan tan bien jejejej!.
Y lo que vendrá!
Hasta la próxima…
<!Compartir, el mejor fenómeno que pudo darnos las redes sociales. Aunque esto no es creación de las redes sociales, hace tiempo ya se podía enviar a email o enviarlo a agregadores tipo digg o meneame. La cuestión es que con las redes sociales esto se ha vuelto público, es decir, compartir es un acto de visibilidad, conocimiento y apoyo. No compartes todo ni a todos, cada vez mas es importante saber filtrar, ie. a mis amigos personales no les suele gustar que les envíe o comparta noticias sobre código o tecnología por el simple hecho que son mis amigos y los conozco procuro compartir con ellos cosas que tengamos en común.
Tampoco estoy de acuerdo en compartir por compartir, vamos que es una forma de dar tu criterio y hay que ser escrupulosos y consecuentes con lo que uno piensa o hace.
Existen servicios como sharethis y miles de plugins para WordPress que nos ayudan a incorporar estos botones a nuestras webs, pero el dar a un usuario muchas opciones hace que pierda el interés de compartir, por eso pienso que es mejor añadir el botón limpio y por defecto aunque todavia estoy por saber como personalizarlos mejor, poner un boton con un diseño propio. Y por esta razón quería compartir el código necesario para poder añadir los botones mas básicos
Primero añade un poco de CSS, con esto podrás controlar como se ven, yo los suelo flotar a la izquierda para que queden alineados, si los usas en formato horizontal, en vertical me pasa que el de linkedin tiene un margen superior que todavía no he depurado.
.sharebuttons {
padding: 10px 0 0 2%;
overflow: visible;
float: left;
width: 98%;
}
.twitter-share-button, .sharebuttons iframe, .sharebuttons .IN-widget{
float: left;
margin: 3px 0 2px;
}
Luego en el loop.php, single.php y si te interesa tambien añadirlo en tus páginas copialo en page.php, siempre dentro del if
<div class="sharebuttons"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="lonchbox" data-lang="es" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" >Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <!-- poner en data-via el usuario de twitter al que pertenece la página --> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=true&width=150&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:150px; height:30px"></iframe> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="right"></script> </div><!--.sharebuttons-->
Espero que sea de ayuda y no cometer algún error de programación básico, si alguien ve algo que me lo diga y lo corrijo.
Actualización:
Una vez puestos los botones, verifica que la configuración de tu WP Super Cache sea así:
La razón es que el caché puede hacer que el conteo de los botones no sea correcto y de esta forma siempre contabiliza la url del post y no la url del blog.
Let`s Share!
Es oficial: Palma tendrá su propio Social Media Day!
Tal y como avanzamos en el anterior post, la empresa de tecnologíasBrújula y la agencia Palma Comunicación se han unido para desarrollar y organizar, de forma voluntaria y no remunerada, el Social Media Day en Palma.
El motivo de la unión entre nuestras empresas es compartir, con todas las personas que lo deseen, el espítitu original de Mashable: reunirse para celebrar como las nuevas tecnologías han cambiado la forma en que vivimos, nos organizamos y nos conectamos con los demás.
El Social Media Day se celebrará el día 30 de junio a las 19:00h en elBLD, el bar d’Es Baluard, punto de encuentro habitual de comunidades 2.0 como la twittpalma.
Puedes seguirnos vía Twitter y confirmar tu asistencia en Facebook.
Via : smdaypalma.com