Esto es un resumen de cómo usar Sublime Text para desarrollar webs con WordPress.

Instalación

Queremos SublimeText 3 con el plugin de Emmet y el plugin de WordPress para poder escribir código HTML y de WordPress con facilidad. Para ello vamos a instalar plugins pero usando el Package Control de Sublime Text. Para ello necesitamos:

  1. Instalar Python 2.7
  2. Instalar Sublime Text 3
  3. Instalar los plugins:
    1. Package Control: https://sublime.wbond.net/installation
      1. Sublime_01
    2. Plugin de Emmet (HTML y CSS): https://sublime.wbond.net/packages/Emmet
    3. Plugin de WordPress: https://sublime.wbond.net/packages/WordPress
    4. Plugin de WordPress Codex, que te abre la función que estés escribiendo en la web de codex para conocer su sintaxis:
      1. https://sublime.wbond.net/packages/Search%20WordPress%20Codex
      2. Sublime_03

Abreviaturas de Sublime Text

Estas son algunas abreviaturas de ejemplo para que uno sepa de lo que se puede llegar a hacer. Sólo funcionan si el archivo tiene la extensión correcta, html, css, php, …

  • HTML
    • html:5 + TAB
      • Escribirá la estructura básica de un HTML 5
    • <php + TAB
      • Escribirá <?php  ?>
    • theloop
      • Escribirá el bloque loop completo de WordPress
    • section.comments + TAB
      • Escribirá etiqueta HTML SECTION con la clase CSS “comments” => <section class=”comments”></section>
  • CSS
    • back
      • Mostrará el desplegable con los comandos de background y demás. Seleccionamos el que queramos y pulsamos intro.

Consolas de Sublime

  • Ctrl+Shift+P
    • Abre la consola de comandos para poder instalar plugins desde el Package Control
  • Ctrl+Shift+`
    • Abre la consola de comandos estándar de Sublime. Aquí podemos pegar los cógidos que vienen en la web de wbond.net cuando
      buscamos un plugin.
  • Ctrl+P
    • Buscar archivos. Te busca el archivo para que puedas editarlo sin que tengas que buscarlo en el árbol.

Proyectos

Otra funcionalidad interesante de Sublime es mostrar la estructura en árbol de los archivos que estamos utilizando. Para ello, es útil hacer uso de la función de proyectos, aunque también funciona arrastrando la carpeta completa dentro de Sublime.

Para ello debemos crear un proyecto. Desde el menú Project -> Add folder to Project. Indicamos la carpeta de nuestro proyecto y en la parte izquierda se creará el árbol de directorios y archivos que tengamos dentro de ella.

Video

Un video de ejemplo de instalación, configuración de los plugins, y uso:

Es el primer video que realizo y todavía no domino muy bien el tema de maquetación, por eso está sin sonido y sin indicaciones o subtítulos.

Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!