Как изменить Mystique 3.0+ WordPress Theme

Mystique 3.0 WordPress тема имеет много функций, но встроенные до сих пор люди ищут мистику тематические модификации, чтобы удовлетворить потребности там.

A+ A-

В нашей предыдущей статье мы рассмотрели 50 самых разыскиваемых Mystique Theme Модификации, Hacks . Учитывая огромный спрос со стороны наших любимых читателей для модификаций в Mystique 3.0 и огромный отклик на предыдущей статье, здесь мы публикуем Most Wanted Mystique 3.0+ Модификации, Hacks. Настройка Mystique темы по вашему выбору.

Примечание: Если вы не знакомы с кодированием вещи , то нет необходимости для редактирования одной строки кода, заказ Модифицированный Mystique Theme - MystiqueRevised .

Фрагменты кода Изменение Mystique Тема:

Примечание: Для редактирования Mystique WordPress Theme вам нужно добавить следующий код в разделе Внешний вид -> Мистик -> CSS или вкладке Дополнительно. Мы рекомендуем всегда устанавливать Mystique тему ребенка, так что вы не потеряете какие-либо изменения, когда вы будете обновлять тему.

1. Отрегулируйте положение заголовка Логотип сайта:

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

Где 25px это пространство над заголовком сайта и 2рх это пространство под названием сайта или логотипа.

2. Изменение сайта Цвет заголовка:

#logo a {
color: #E0E0E0;
}

Измените значение E0E0E0, если вы хотите другой цвет.

Если вы хотите, чтобы сделать название сайта в соответствии с нашим выбором затем добавьте следующий код:

#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. Измените парения цвет названия блога:

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

Измените значение CECECE, если вы хотите другой цвет.

4. Увеличить размер название сайта текст:

Для увеличения размера текста используйте название сайта следующий код. Отрегулируйте значение 350 соответственно.

#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. Отрегулируйте зазор между навигационной панели и содержания:

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

Отрегулируйте значение 18 в соответствии с вашими потребностями.

7. Регистрация навигационную панель с содержанием основного:

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

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

Join Navigation Bar - Mystique Theme Modifications

8. Включите виджет заголовки в нижнем регистре:

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

9. Изменить размер шрифта по умолчанию текста внутри Почты:

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

10. Граница для каждой должности:

Некоторые люди хотели бы добавить границу к каждому сообщению, вот код, чтобы сделать это,

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

Border For Each Post

11. Изменение черного фона:

В Mystique теме, по умолчанию фон черный вы можете изменить его на другой. Здесь мы дали синий в качестве примера. Вместо синего вы можете использовать значение цвета, как #CECECE или любое другое значение, которое вы хотите.

body{background-color:blue;}

12. Альтернативный заголовок изображения:

Чтобы использовать следующий заголовок изображения добавить данный код ниже изображения.

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

Если вы используете тему детской затем дать полный путь к изображению. Например, как я использую детскую тему я добавил следующий код,

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

13. Центр логотип фото в заголовке:

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

Center Logo

14. Перемещение вверх иконки социальных медиа:

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

Отрегулируйте значение 30px, чтобы все, что вы хотите.

Move Up Social Media Icons

15. Дисплей Количество просмотров сообщения:

Как Миленко (Тема разработчика) сказал в своем форуме, мнения сообщение уже реализованы, но по умолчанию отключена, так как на больших сайтах записи просмотры пост (то есть. Обновление базы данных каждый раз, когда посетители просматривает страницу) может оказать влияние на производительность.
Если вы хотите включить счетчик сообщений просмотра, откройте файл functions.php из папки ребенка тема (должна быть загадочность-расширения) и добавить:

define('ATOM_LOG_VIEWS', true);

Затем используйте его везде, где вы хотите в шаблонах, например, в teaser.php (скопировать оригинал в папку темы ребенка) ищет следующий код:

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

затем добавьте следующий код ниже приведенный выше код:

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

No of Views

Внутри виджетов, как "Записи" виджета вы можете вид вывода сообщение от используя {} Просмотры ключевого слова в шаблонах.

16. Заменить страницы с категориями, как и в старой теме:

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

Теперь вы получите категории в меню.

17. Изменение расстояния в заголовке блога текста:

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

18. Как удалить панель навигации с 3.0

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

Лучший способ, с помощью дочерней темы: скопировать header.php к вашему ребенку тему и удалить код для навигации

19. Отрегулировать Оль, ул:

Элементы списка между ола, ул разрезают на левой границе. Вот код, чтобы отрегулировать эти элементы

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

20. Добавьте баннер в непосредственной близости от логотипа:

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%;
}

Там, где 70% 'X' координатная, 30% 'Y' координат. Так что просто изменить: фон-позиции: 98% 50%;
отрегулировать положение баннера

21. Значок Звезда для заказа-на-во просмотров:

Только вид заказа по-не имеет значок звездочки. Комментарий имеет порядок, хотя он. Так вот код, чтобы добавить значок звездочки для представлений порядка по-,

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

22. Изменение [...] из отрывков с 'Читать далее':

Используйте тему Child и добавьте следующий код в пользовательском - определенный код.

<?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. Выполните боковые панели серого цвета (#eee) и основной контент белый (#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. Фиксированный пользовательские фоновое изображение:

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

25. Как сделать комментарии Dofollow:

В WordPress Dashboard -> Внешний вид -> Редактор
Открыть файл Comment.php (Рекомендация: Используйте Ребенка тему, скопируйте файл Comment.php из родительского темы папки в папку детской теме) и заменить

atom()->getAuthorAsLink()

с

atom()->getAuthorAsLink('dofollow')

26. Изменить внешний вид "Показать еще" кнопки:

По умолчанию "Показать еще" кнопка не легко видеть, используйте следующий код, чтобы сделать его легко увидеть.

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

Если вы хотите цвет, кроме синего затем изменить значение # 0997e1 к тому, что вы хотите.

27. Изменение внешнего вида изображения, которое показывает количество комментариев на странице:

Modified Comments Image Mystique

Во- первых, скачать и добавить icons.png файл изображения в папку Mystique Image (темы / мистика / изображения /).

.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;
}

Не забудьте изменить "URL вашего сайта ЗДЕСЬ" текст на ваш реальный URL сайта.

28. Добавьте прозрачные границы к таблицам:

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

29. Уменьшение размера каждого почтового заголовка:

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

Первоначальная стоимость составляет 300%, отрегулируйте значение в соответствии с вашими потребностями.

30. Для отдельных сообщений, чтобы отобразить изображения без покрытия боковой панели:

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

Отрегулируйте максимальную ширину по своему предпочтению для тех, кто хотел.

31. Перемещение Слоган под названием:

#logo{
  float:none;
}

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

32. Как добавить Google +1 кнопку в Mystique 3.0+ панели навигации:

Под WordPress Dashboard -> Внешний вид -> Редактор
В колонке Шаблоны поиска файла "footer.php".
В footer.php поиска файлов для тег и добавить следующий код перед тегом тела:

<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>

Тогда при WordPress Dashboard -> Внешний вид -> Настройки Mystique
На вкладке Дополнительно -> "Определяемый пользователем код".

<?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

Теперь вы увидите кнопку Google+ на вашем Mystique навигационной панели. Вы можете повторить ту же процедуру, чтобы добавить кнопку Facebook Like.

33. Как добавить в поиск Mystique 3.0+ панели навигации:

под WordPress Dashboard -> Внешний вид -> Настройки Mystique
На вкладке Дополнительно -> "Определяемый пользователем код".

<?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>';
}

И добавьте следующий код в настройках Mystique -> вкладка 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. Как изменить Главная страница Стиль:

Если вы хотите изменить домашнюю страницу внешний вид и хотите, чтобы показывать только после эскиз и название должности затем создать новый файл и дать имя teaser.php в файл в папке темы ребенка, добавьте следующий код внутри 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>

Затем в настройках Mystique -> вкладка CSS добавить следующий код:

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. Как добавить Breadcrumbs:

Мы рекомендуем вам добавить Breadcrumbs к вашему Mystique тему. Это очень хорошее дополнение к конструкции из - за удобства и простоты использования , а также обеспечивает SEO преимущества , поскольку она связана с пути , следовательно , увеличения активности бота на странице индексации. Breadcrumbs обеспечивают возможность легко перемещаться по сайту, от занимаемой должности, к категории, к следующему сообщению, или от детской страницы, на родительской странице и т.д.

Прежде всего , необходимо скачать плагин RDFa Breadcrumb загрузить и активировать его , как обычно. Если вы используете WordPress SEO по Йоаст затем метод приведен ниже , чтобы добавить хлебные крошки с помощью WordPress SEO.

Примечание: Активировать Mystique Child Theme (Мистик-Extend), а затем под WordPress Dashboard -> Внешний вид -> Настройки Mystique -> Дополнительно, искать для заданного пользователем кода и добавьте следующий код:

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>';

Если вы включили опцию хлебных крошек (WordPress панели -> SEO -> Внутренние ссылки) в WordPress SEO от Йоаст то вместо добавления выше код Добавить следующий код в Advanced-> "Определяемый пользователем кода".

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>';

После добавления кода выше вы увидите Иерархическая на своем посту следующим образом:

Breadcrumbs For Mystique WordPress Theme

После добавления сухари, в страницах результатов поисковой системы (SERP) ваши результаты сайт будет выглядеть следующим образом.

Breadcrumbs in SERP

Примечание: Это займет около 12 часов до 2 дней , чтобы показать сухари для всех страниц в зависимости от того, как поисковых ботов сканировать ваш сайт. Вы можете проверить сайт сухари в Rich Snippet Tool .

Еще одна вещь, предыдущий и следующий пост ссылку полезны, когда ссылки после поста, а не выше заголовок поста, так что ищите код

<?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; ?>

Вырезать и вставить код после следующей строки:

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

Если вы хотите изменить внешний вид предыдущего и следующего поста ссылку , а затем оформить пятый фрагмент кода .

36. Как сделать Надпись Увеличить размер шрифта:

Если вы хотите изменить размер шрифта текста заголовка затем добавить следующий код в настройках Mystique -> вкладка CSS

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

В будущем, мы будем делать много модификаций в Mystique тему таким образом, мы будем держать эту тему обновляется. Если у вас есть предложения или проблемы, касающиеся фрагментов кода, предоставленных здесь затем поделиться им с нами в форме комментариев ниже, мы постараемся решить ваши проблемы.

Справка: Digitalnature Форум , благодаря миленько.

Если вам нравятся эти Mystique Theme Модификации пожалуйста, ретвит и поделиться им с друзьями на Facebook и Google+.

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии