Cómo modificar la mística 3.0+ WordPress Tema

Mystique 3.0 Tema de WordPress tiene muchas características incorporadas pero aún así la gente está buscando modificaciones tema mística que se adaptan es necesario.

A+ A-

En nuestro artículo anterior hemos cubierto 50 más buscados Modificaciones del tema de la mística, Hacks . Teniendo en cuenta la gran demanda por nuestros queridos lectores de modificaciones en Mystique 3.0 y la enorme respuesta para el artículo anterior, aquí estamos publicando más buscados Mystique 3.0+ modificaciones, Hacks. Personalizar el tema Mystique como por su elección.

Nota: Si usted no está familiarizado con la materia de codificación, entonces no hay que editar sola línea de código, comprobación de modificación Mystique Theme - MystiqueRevised .

Fragmentos de código para modificar el tema Mystique:

Nota: Para modificar WordPress Tema Mystique tiene que agregar código siguiente, En Apariencia -> Mystique -> CSS o en la ficha Opciones avanzadas. Le recomendamos que instale siempre el tema Mystique niño para que no se pierda ninguna modificación cuando se va a actualizar el tema.

1. Ajuste la posición del sitio Logo Título:

#site-title {
padding: 25px 0 2px 0;
}

Donde 25px es el espacio por encima del título del sitio y la 2px es el espacio de abajo título del sitio o el logo del sitio.

2. Cambiar el color del Sitio título:

#logo a {
color: #E0E0E0;
}

Cambiar el valor de e0e0e0 si usted quiere otro color.

Si desea realizar título del sitio según nuestra elección a continuación, añadir siguiente código:

#logo a {
    color: #E0E0E0;
    display: block;
    font-variant: small-caps;
    text-decoration: none;
    text-transform: none;
}

#logo {
    font: bold 395% Verdana,Arial,Helvetica,"Arial Black","Helvetica Black",Gadget,sans-serif;
    letter-spacing: -2px;
}

3. Cambiar el color de la libración del título del blog:

#logo a:hover {
color: #CECECE;
}

Cambiar el valor de CECECE si usted quiere otro color.

4. Aumentar el tamaño del texto título del sitio:

Para aumentar el tamaño del texto del título utilización sitio siguiente código. Ajustar el valor de 350 en consecuencia.

#logo {
font: bold 350% "Arial Black","Helvetica Black",Gadget,sans-serif;
letter-spacing: -2px;
}
/* Change Appearance of Previous and Next Links */
.post-links a{
background-color: transparent;
border: 0 none;
color: #0071BB;
font-size: 14px;
font-weight: bold;
padding: 2px 4px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}

.post-links a:hover{
color: #ED1E24;
}

.post-links div{
color: #0071BB;
display: block;
line-height: normal;
max-width: 49%;
}

.post-links .alignright{
text-align: right;
}

6. Ajuste el espacio entre la barra y el contenido de navegación:

.shadow-right {
padding-bottom: 18px;
}

Ajuste el valor de 18 de acuerdo a su necesidad.

7. Únete barra de navegación con el contenido principal:

.shadow-right {
padding-bottom: 0;
}

.social-media {
bottom: 10px;
right: 10px;
}

Join Navigation Bar - Mystique Theme Modifications

8. títulos de widgets a su vez a minúsculas:

.block .title h3 {
text-transform: none;
}

9. Cambiar el tamaño de fuente predeterminado del texto dentro del mensaje:

.hentry .post-content {
font-size: 16px;
line-height: 20px;
margin: 0 0 15px;
}

10. Frontera para cada mensaje:

Algunas personas les gusta agregar frontera para cada puesto, aquí está el código para hacer eso,

.post{
border:2px solid;
margin:0 0 40px;
padding:15px;
text-align:justify;
}

Border For Each Post

11. Cambiar el fondo negro:

En el tema Mystique, de fondo por defecto es negro se puede cambiar a otra. Aquí nos dimos azul como un ejemplo. En lugar de azul se puede utilizar como valor de color #CECECE o cualquier otro valor que desee.

body{background-color:blue;}

12. imagen de cabecera alternativo:

Para utilizar siguiente imagen de cabecera añadir código dado debajo de la imagen.

/* Alternate header image */
#page{
background:transparent url(/images/extras/header-alternate.jpg) no-repeat center top;
}

Si está utilizando el tema de los niños a continuación, dar la ruta completa de la imagen. Por ejemplo, como yo estoy usando el tema de niño he añadido siguiente código,

/* Alternate header image */
#page {
background:transparent url(/uploads/other-domain/wp-content/themes/mystique/images/extras/header-alternate.jpg) no-repeat center top;
}

13. Centro de la imagen del logotipo en la cabecera:

#logo {
width : 100%;
text-align : center !important ;
}

Center Logo

14. Mover los iconos de redes sociales:

.media {
    bottom: 30px;
    position: absolute;
    right: 2px;
    z-index: 5;
}

Ajustar el valor de 30px a lo que quieras.

Move Up Social Media Icons

15. Mostrar el número de vistas de publicaciones:

Como dijo Milenko (Tema desarrollador) en su foro, Vistas de la publicación en que se aplican, pero desactivados por defecto, porque en grandes sitios de grabación de vistas de publicaciones (es decir. La actualización de la base de datos cada vez que un visitante visita una página) puede tener un impacto en el rendimiento.
Si desea habilitar la vista posterior recuento, abra el archivo functions.php de tu carpeta de temas niño (debe ser mística-extender) y añade:

define('ATOM_LOG_VIEWS', true);

A continuación, utilice siempre que lo desee en las plantillas, por ejemplo, en teaser.php (copiar el original a su carpeta de temas de niños), busque el código siguiente:

<?php if(atom()->options('post_category') && atom()->post->getTerms('category')): ?>
<?php printf(_a('in %s'), atom()->post->getTerms('category', ', ')); ?>
<?php endif; ?>

a continuación, añadir siguiente código de abajo el código de seguridad:

| Views <?php echo atom()->post->getViews(); ?>

No of Views

widgets de interior, al igual que el widget "Mensajes" que pueda vistas de publicaciones de salida mediante el uso de la palabra clave} {VISTAS en las plantillas.

16. Vuelva a colocar las páginas con categorías como en el viejo tema:

atom()->addContextArgs('primary_menu',categoryMenu);

Ahora obtendrá categorías en el menú.

17. Cambiar el espaciado del texto del título del blog:

#logo{
  letter-spacing: 0; /* change this value, default is -6px */
}

18. Cómo quitar la barra de navegación de 3,0

#header .shadow-left{
  display: none;
}

La mejor manera, utilizando un tema menor: copia header.php a su tema infantil y eliminar el código para la navegación

19. Ajuste ol, ul:

Los elementos de la lista entre ol, ul se cortan en el borde izquierdo. Aquí está el código para ajustar estos elementos

.hentry ol,ul{
  padding-left:15px;
}

20. Añadir una bandera al lado de la insignia:

Logo with Banner

#header {
background: url(/uploads/other-domain/wp-content/themes/mystique/images/YOUR-LOGO-NAME.png);
background-repeat: no-repeat;
background-position:70% 30%;
}

Donde el 70% es de coordenadas "X", el 30% es "Y" de coordenadas. Por lo que sólo cambiar: background-position: 98% al 50%;
para ajustar la posición de la bandera

21. icono de estrella para la orden-por-vistas:

Sólo las vistas fin-de-no tiene el icono de estrella. El comentario de la orden tiene que aunque. Así que aquí está el código para agregar icono de estrella para las vistas fin-de-,

.block-tabs .tabs .navi li.nav-posts-views a{background-position: 0 -37px;}

22. Cambiar el [...] a partir de extractos con 'Leer más':

Utilice el tema Niño y añadir siguiente código de usuario - código definido.

<?php
add_filter('excerpt_more', 'my_read_more_text');
function my_read_more_text($text){
return sprintf(' <a class="more-link" href="%1$s">%2$s</a>', get_permalink(), 'Read further...');
}

23. Hacer las barras laterales grises (#eee) y el principal blanco de contenido (#fff):

Sidebar Content

.c2right #mask-1,
.c2left #mask-3,
.c3 #mask-2,
.c3left #mask-3,
.c3right #mask-1
  {background: #fff;}

.c2left #mask-1,
.c2right #mask-3,
.c3 #mask-1, .c3 #mask-3,
.c3left #mask-2,
.c3right #mask-3
  {background: #eee;}

24. imagen de fondo personalizado fijos:

#page
{
  background-repeat:no-repeat;
  background-attachment: fixed;
}

25. Cómo hacer comentarios dofollow:

En panel de WordPress -> Apariencia -> Editor
Abrir el archivo comment.php (Recomendación: Tema de uso infantil, copia de archivos de la carpeta comment.php tema de los padres a la carpeta de tema infantil) y reemplazar

atom()->getAuthorAsLink()

con

atom()->getAuthorAsLink('dofollow')

26. Cambiar la apariencia del botón "Mostrar Más":

Por defecto "Mostrar más" botón no es fácilmente visible, el uso siguiente código para que sea fácilmente visible.

.no-fx .block a.more, .block .fadeThis a.more {
    -moz-border-radius: 5px 5px 5px 5px;
    background: none repeat scroll 0 0 #0997e1;
}

Si usted quiere color diferente del azul, a continuación, cambiar el valor # 0997e1 a lo que quieras.

27. Cambiar la apariencia de la imagen que muestra el número de comentarios en la página principal:

Modified Comments Image Mystique

En primer lugar, descargar y agregar icons.png archivo de imagen a las carpetas Imagen Mystique (temas / mística / images /).

.hentry .comments {
position: absolute;
right: 1px;
top: 5px;
z-index: 5;
background: url("YOUR SITE URL HERE/wp-content/themes/mystique/images/icons.png") no-repeat scroll 0 -505px transparent;
width: 48px;
height: 38px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: #999 0px -1px -1px;
line-height: 34px;
font-size: 150%;
ont-weight: bold;
}

.hentry a.comments:hover {
background-position: 0px -543px;
color: #fff;
text-shadow: #000 0px -1px -1px;
}

No se olvide de cambiar "la URL del sitio aquí" texto a la URL de su sitio real.

28. Añadir bordes transparentes a las tablas:

table,table td,table th,table tr.even td,table tr:hover td{border:0;background-color:transparent;}

29. Reducir el tamaño de cada partida mensaje:

h1.title {
    font-size: 250%;
}

valor original es de 300%, ajustar el valor de acuerdo a su necesidad.

30. Para los puestos individuales con el fin de mostrar imágenes sin cubrir la barra lateral:

img {
max-width: 468px;
max-height: 560px;
}

Ajuste de ancho máximo de su preferencia para cualquier persona quisiera.

31. Mover el lema bajo el título:

#logo{
  float:none;
}

#site-title .headline{
 float:none;
 border:0;
 margin:20px 0;
 padding:0;
}

32. Cómo agregar Google +1 Button en Mystique 3.0 + Barra de navegación:

Bajo panel de WordPress -> Apariencia -> Editor
En la columna de plantillas buscar el archivo "footer.php".
En la búsqueda de archivos para footer.php etiquetar y añadir siguiente código antes de la etiqueta del cuerpo:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

A continuación, en panel de WordPress -> Apariencia -> Configuración de la mística
En la ficha Opciones avanzadas -> "código definido por el usuario".

<?php
// for custom menus
add_filter('wp_nav_menu_items', 'add_google_plus_button_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_google_plus_button_to_menus');

function add_google_plus_button_to_menus($items){

// append it to the nav menu
return $items.'<li style="float: right; margin-left: 111px; padding-top: 6px;">
<div class="g-plusone"><g:plusone annotation="inline"></g:plusone></div>
</li>';
}

Google Plus Button Mystique Nav

Ahora verás botón de Google+ en tu barra de navegación Mystique. Puede repetir mismo procedimiento para agregar el botón de Facebook Al igual.

33. ¿Cómo añadir Buscar en Mystique 3.0 + Barra de navegación:

bajo WordPress Dashboard -> Apariencia -> Configuración de la mística
En la ficha Opciones avanzadas -> "código definido por el usuario".

<?php

// for custom menus
add_filter('wp_nav_menu_items', 'add_search_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_search_to_menus');

function add_search_to_menus($items){

// capture the search template
ob_start();
atom()->template('searchform');
$search = ob_get_clean();

// append it to the nav menu
return $items.'<li class="nav-search">'.$search.'</li>';
}

Y añadir siguiente código en la configuración de la mística -> pestaña CSS

/* increases top/bottom padding on nav items, so it fits the theme-default search form */
.nav-main a{
padding:12px 15px 14px;
}

/* position and width of the form: top-right */
.nav-main li.nav-search{
position:absolute;
background: none;
border: 0;
width: 250px; /* <- width of the search form, can be changed */
height: 34px;
right:10px;
top:5px;
}

/* no padding on this nav menu item */
.nav-main li.nav-search a{
padding: 0;
}

.nav-main li.nav-search li:hover a{
background-color: transparent;
}

.media {
bottom: 35px;
position: absolute;
right: 2px;
z-index: 5;
}

Search in Mystique Navigation Bar

34. Cómo cambiar la página principal Estilo:

Si desea cambiar el hogar apariencia de la página y quiere mostrar solamente puesto en miniatura y el título del mensaje a continuación, crear un nuevo archivo y darle nombre teaser.php al archivo en la carpeta de tema infantil, añadir siguiente código dentro de teaser.php:

<article id="post-<?php the_ID(); ?>" <?php post_class('thumb-only'); ?>>
<a class="post-thumb" href="<?php atom()->post->URL(); ?>">
<?php atom()->post->thumbnail(); ?>
</a>

<section>
<header><a href="<?php atom()->post->URL(); ?>"><?php atom()->post->title(); ?></a></header>
<p><strong><?php atom()->post->terms('category'); ?></strong></p>
<footer><?php atom()->post->date(); ?></footer>
</section>
</article>

Luego, en la configuración de la mística -> pestaña CSS añadir siguiente código:

article a img{
  border: 1px solid #fff;
  box-shadow: 0 0 5px 1px #888;
}

article section{
  text-align:right;
}

article section header{
  font-size: 130%;
}

35. Cómo agregar las migas:

Le recomendamos que usted agregue las migas a la mística del tema. Es una muy buena además del diseño, debido a la facilidad de uso y también proporciona beneficios de SEO ya que se vincula a la ruta, por tanto, el aumento de la actividad bot en la página de indexación. Las migas proporcionan una manera de navegar fácilmente a través de su sitio, de entrada, a la categoría, a la próxima entrada, o desde la página niño, a la página de los padres, etc.

En primer lugar usted necesita para descargar el plugin RDFA los listados de subida y lo activa como de costumbre. Si utilizas WordPress SEO by Yoast se da entonces el método de abajo para agregar el pan rallado utilizando WordPress SEO.

Nota: Activar la mística de niños del tema (Mystique-Extend), a continuación, en panel de WordPress -> Apariencia -> Configuración de Mystique -> Avanzado, busque el código definido por el usuario y añadir código siguiente:

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if(function_exists('rdfa_breadcrumb')){ rdfa_breadcrumb(); }
       });
echo '</div>';

Si ha habilitado la opción de pan rallado (panel de WordPress -> SEO -> Vínculos internos) en WordPress SEO by Yoast continuación, en lugar de añadir por encima de código de complemento siguiente código en avanzadas-> "código definido por el usuario".

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if ( function_exists('yoast_breadcrumb') ) {
             yoast_breadcrumb('<p id="breadcrumbs">','</p>');
          }
       });
echo '</div>';

Después de añadir el código anterior, verá los listados de tu entrada de la siguiente manera:

Breadcrumbs For Mystique WordPress Theme

Después de añadir el pan rallado, en las páginas de resultados del motor de búsqueda (SERP) resultados de su sitio se verá como esto.

Breadcrumbs in SERP

Nota: Se va a tomar alrededor de 12 horas a 2 días para mostrar rutas de exploración para todas las páginas, dependiendo de cómo los robots de los motores de búsqueda rastreen su sitio. Puede revisar sus migas de pan sitio en la herramienta fragmento enriquecido .

Una cosa más, enlace post anterior y el próximo son útiles cuando los enlaces son después de que el mensaje en lugar del título de la entrada anterior, a fin de buscar el código

<?php if(atom()->options('single_links')): ?>
            <div class="post-links clear-block">
              <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
              <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
            </div>
<?php endif; ?>

Cortar y pegar el código siguiente después de la línea:

 <?php atom()->action('after_primary'); ?>

Si desea modificar la apariencia de un enlace post anterior y junto a continuación, la caja quinto fragmento de código .

36. Cómo hacer el texto más grande Leyenda:

Si desea cambiar el tamaño de fuente del texto de la leyenda a continuación, añadir siguiente código en la configuración de la mística -> pestaña CSS

.wp-caption-text {
   font-size: 13px;
}

En el futuro, vamos a hacer muchas modificaciones en el tema Mystique por lo que vamos a mantener actualizado este tema. Si usted tiene algunas sugerencias o problemas acerca de fragmentos de código que se proporcionan aquí luego compartirlo con nosotros en el comentario siguiente formulario, vamos a tratar de resolver sus problemas.

Referencia: digitalnature Foro , gracias a Milenko.

Si te gustan estos Modificaciones del tema Mystique por favor Retweet y compartirlo con tus amigos en Facebook y en Google+.