Inicia sesión




Cómo personalizar un tema básico de WordPress desde El Editor

Este tutorial es para los usuarios de WordPress que saben un poco acerca de los códigos HTML y CSS. Puede personalizar un tema de WordPress básico de la opción del editor. Es muy fácil de personalizar algunas opciones básicas de edición. Desde editor puede agregar, editar, borrar todos los códigos HTML, PHP y CSS de la plantilla.


01. Para editar / añadir / eliminar los códigos van a Apariencia -> Editor.

02. A la derecha del editor hay varios archivos html, php y css como archive.php, author.php, category.php, style.css, index.php etc. Pueden ser categorizados como plantillas y Estilo. Si usted no sabe ABC de html, php o CSS no intente cambiar nada en los archivos .php. Pero todavía se puede cambiar un poco de estructura básica de la página web como el color de la fuente, el cuerpo de color del texto, en dirección etc de la página style.css. Observe que el código puede variar dependiendo de las plantillas. Haga clic en style.css.

03. Para cambiar el texto del cuerpo, tamaño de fuente, color, cabecera, etc ir a style.css y encontrar el cuerpo de la etiqueta (marque la última captura de pantalla) .I estoy cambiando el tamaño de la fuente (font-size: 12px;) a 12 píxeles y el cambio del color (color: # 5681d6;) también. Puede utilizar el selector de color en línea (por ejemplo - https://www.colorpicker.com/) para escoger su propio código de color.

body { 
font-size: 12px; 
font-size: 1rem; 
font-family: Helvetica, Times New Roman, sans-serif; 
texto-rendering: optimizeLegibility; 
color: # 5681d6; 
}

04. Para el estilo de los enlaces de la ONU visitó, visitó, vuelo estacionario, y activos que se pueden cambiar el código siguiente -

a: link {color: PickAnyColor ;} 
a: visited {color: PickAnyColor ;} 
a: hover {color: PickAnyColor ;} 
a: active {color: PickAnyColo r }
05. Para cambiar la configuración del encabezado cambian las etiquetas de cabecera. Aquí h1 selección dará un título grande. Así que si usted desea hacer el tipo de letra menor título entonces usted puede escoger h3, h3, h4, h5 o h6 lugar de h1.
/ * * Encabezado / 
.site-header { 
padding: 24px 0; 
padding: 1.714285714rem 0; 
} 
h1 .site-cabecera, 
.site encabezado h3 { 
text-align: center; 
} 
.site-header h1 a, 
.site -header h3 a { 
color: # 515151; 
display: inline-block; 
text-decoration: none; 
} 
.site-header h1 a: hover, 
.site encabezado h3 a: hover { 
color: # 21759b; 
} 
.site- encabezado h1 { 
font-size: 24px; 
font-size: 1.714285714rem; 
line-height: 1.285714286; 
margin-bottom: 14px; 
margin-bottom: 1rem; 
} 
.site encabezado h3 { 
font-weight: normal; 
font-size : 13px; 
font-size: 0.928571429rem; 
line-height: 1.846153846; 
color: # 757575; 
} 
.header imagen { 
margin-top: 24px; 
margin-top: 1.714285714rem; 
}

 06. Para el estilo de la barra lateral como la reducción o el aumento de la anchura, barra lateral color de fuente, tamaño de fuente, etc, entonces se puede cambiar de editor.Compruebe el siguiente código.




/ * * Sidebar / 
.widget área .widget { 
-webkit-guiones: auto; 
-moz-guiones: auto; 
guiones: auto; 
margin-bottom: 48px; 
margin-bottom: 3.428571429rem; 
word-wrap: break-palabra ; 
} 
.widget área .widget h3 { 
margin-bottom: 24px; 
margin-bottom: 1.714285714rem; 
} 
.widget área .widget p, 
.widget área .widget li, 
.widget área .widget .textwidget { 
fuente -size: 13px; 
font-size: 0.928571429rem; 
line-height: 1.846153846; 
} 
.widget área .widget p { 
margin-bottom: 24px; 
margin-bottom: 1.714285714rem; 
} 
.widget área .textwidget ul { 
lista -estilo: disco exterior; 
margin: 0 0 24px; 
margin: 0 0 1.714285714rem; 
} 
.widget área .textwidget li { 
margin-left: 36px; 
margin-left: 2.571428571rem; 
} 
.widget área .widget un { 
color: # 757575; 
} 
.widget área .widget a: hover { 
color: # 21759b; 
} 
.widget del área de # s { 
anchura: 53.66666666666%; / * Definir un ancho para evitar dejar caer una amplia submit botón * / 
}

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2018-08-20
  • Categorias: Diseño Web Html Noticias Tutorial WebSite WordPress

Cómo personalizar un tema básico de WordPress desde El Editor
Cómo personalizar un tema básico de WordPress desde El Editor Cómo personalizar un tema básico de WordPress desde El Editor...
Tutoriales en linea


Comentarios 1
    image
    MichaelDob 2015-11-09
    Thanks so much for the forum.Really thank you! Much obliged.
    Spam


Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






No pierdas tiempo con las web de Pago por clic

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-06
  • Categorias: PTC WebSite Internet Trucos y tips Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Como descargar videos de YouTube, Instagram, Facebook y Twitter

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-04
  • Categorias: YouTube Audio Video Redes Sociales Facebook Twitter Instagram WebSite Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial