Как настроить тему Mistique

Как настроить тему Mistique | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Тема Mystique — это целый конструктор, позволяющий гибко видоизменять дизайн блога. Настроек у этой темы настолько много, что новичкам ее настройка может оказаться невероятным препятствием. Однако не все так страшно, как кажется, и сейчас мы в этом убедимся.

После установки программы зайдите в ее настройки. Они начинаются с выбора расположения сайдбаров и цветовой гаммы.

Дизайн

Выберете то расположение и тот цвет, который вам больше нравится.

tiaurus-2010-05-03_105816

После этого вам нужно решить, какой шаблон использовать:с фиксированной шириной или “резиновый”. Я всегда в этом случае выбираю “резиновый”, то есть тот, который автоматически будет подстраиваться под разрешение вашего монитора и размер окна браузера. Если вы выбираете “резиновый” шаблон, то укажите, сколько процентов должна занимать колонка с основными записями.

tiaurus-2010-05-03_110709

Если же вы выбрали фиксированную ширину, то и ее стоит точно обозначить.

tiaurus-2010-05-03_110305

Дальше можно указать основной шрифт, который будет использоваться в записях. Так же можно указать собственный логотип и свое изображение фона (то, что вы видите вокруг основной колонки блога).

tiaurus-2010-05-03_110815

Содержание

Настройки содержимого достаточно простые. Есть несколько моментов, которые вам нужно установить, но даже если вы этого не сделаете, все будет отображаться корректно. Для начала определите, какие мета-данные нужно показывать в каждой записи. Так же следует указать, в каком виде выводить посты на главной — полностью, или же в виде короткого текстового анонса. Если вы выберете вывод содержимого полностью (рекомендую), то оно будет выводится до тега more со всеми изображениями. Если же вы выберете краткий текстовый анонс записи, то нужно будет указать его длину.

tiaurus-2010-05-03_111400

Далее следует настройка миниатюр изображений. Эти миниатюры используются при выводе содержимого в виде краткого текстового анонса и в “карусельке”. Если же вы не делали раньше миниатюры изображений, то тогда нужно предварительно воспользоваться плагином Regenerate Thumbnails — он пройдется по всем постам и создаст миниатюры. Размеры миниатюр в этом плагине нужно установить такие же, как и в настройках этой темы. Впрочем, можно обойтись без миниатюр — в настройках есть установка брать первое изображение из поста, и использовать его в качестве миниатюры для анонсов (Auto generate thumbnails). Единственное в этом случае условие, которое нужно соблюдать — снабжать каждый пост картинкой.

tiaurus-2010-05-03_112212

Можно настроить показ стран комментаторов в виде флагов, но я считаю это излишним, к тому же такая функция существенно увеличивает нагрузку на блог.

tiaurus-2010-05-03_112638

Далее следует настроить ту самую “карусельку” — анонс постов на главной странице. В ней можно показывать определенное количество публикаций (настраивается). Посты меняются с определенной периодичностью (время сменя слайда настраивается). Чтобы в слайдер не попадали слишком давние посты, можно выставить временной порог, ограничивающий это. Ну и самое главное — выбрать, где выводить посты в “карусельке”: на всех страницах, только на страницах поиска, в архивах.

tiaurus-2010-05-03_113216

По умолчанию стоит вариант вывода только тех постов в “карусельке”, которые специально отмечены.

tiaurus-2010-05-03_121927

В настройках подвала используются шорткоды. Вы можете изменить содержимое подвала, используя их.tiaurus-2010-05-03_115723 Просто впишите нужные шорткоды в форму и посмотрите, что получилось.

Далее следует настроить навигацию. Сразу под шапкой темы показывается выпадающее меню. В этом меню в качестве пунктов можно использовать страницы блога, категории или избранные ссылки. Можно это меню и отключить. Я советую использовать страницы (иерархия сохраняется и отображается).

tiaurus-2010-05-03_113450

Потом переходите к настройкам “плюшек” — Твиттера и RSS: укажите ваш ник в Твиттере, и пропишите путь к RSS. Поле RSS заполняется автоматически, но его можно изменить, если вы хотите использовать краткий вывод RSS (…/feed/rss), или же если вы используете внешние сервисы (например, Feedburner).

tiaurus-2010-05-03_113944

СЕО

Пункт настройки поисковой оптимизации следует использовать в том случае, если у вас нет никаких других seo-плагинов (например, Light SEO). Эта настройка позволит создавать к каждой записи уникальный заголовок для страниц комментирования (чтобы избежать дублирования при разбивке больших обсуждений), создавать описание каждой страницы, используя мета-теги и ключевые слова. Если вы не знаете, что такое SEO, и не применяете для этого плагины, то поставьте эту галочку.

tiaurus-2010-05-03_114041

Реклама

Раздел настройки рекламы содержит поля, в которые нужно вставлять рекламный код. Этот код автоматически будет виден в тех поста, в которых вы будете использовать шорткод (вставляется в режиме HTML в пост, страницу или текстовый виджет). Пример шорткода:

[ad code=4 align=center]

tiaurus-2010-05-03_114714

Раздел для продвинутых

В разделе для продвинутых можно указать использовать jQuery, Ajax и эффект lightbox. Первые два Java скрипта отображают изменения на странице без перезагрузки, а так же добавляют красивые визуальные эффекты. Lightbox помогает красиво выводить картинки.

tiaurus-2010-05-03_115132

Так же в этом разделе можно добавить свои функции в файл functions.php, не прибегая к его офлайновому редактированию. Да, это тот код, который может заменять работу плагинов.

tiaurus-2010-05-03_115626

Пользовательский CSS

В этом разделе настроек можно добавить в CSS свое дополнительное оформление (например, оформление постовых). Этот раздел, как и предыдущий, удобно использовать в том случае, если у вас нет доступа через FTP к файлам темы (есть и такие тарифные планы).

tiaurus-2010-05-03_115936

Сохранение настроек и восстановление

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

tiaurus-2010-05-03_120258

Настройка виджетов

В принципе, тема самодостаточная и без виджетов. Но если вы хотите изменить содержимое сайдбаров и подвала, то в теме создано несколько удобных виджетов. Обратите внимание, какие есть виджеты,

tiaurus-2010-05-03_121402

и куда их можно вставить.

tiaurus-2010-05-03_121439  tiaurus-2010-05-03_121456

Надеюсь, что этот пост окажется вам полезным.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Владимир

    Спасибо за пояснительную записку, но если бы она была месяц назад было бы лучше. Это было то время, когда я методом тыка разбирался в этой теме.
    У меня два вопроса:
    1. Каруселька, на моем блоге вообще не работает. Вернее она показывает один анонс, а на остальных начинает глючить. Думаю, что это вызвано плагином кэширующим базу даных. Вы не знаете с чем это может быть связано?
    2. Вы сказали, что CSS можно настроить плагины. Разъясните пожалуйста, как это сделать. Я конечно знаю, что CSS, это важный инструмент для блоггера, но никак не могу понять, как самостоятельно вносить изменения.
    Спасибо вам за сайт и за вашу проделанную работу.

    Ответить
    1. tiaurus

      1. Каруселька в моем тестовом блоге работает, но довольно быстро, и регулировка задержки между сменой слайдов почти не действует. Поэтому делаю вывод, что все дело в капризном скрипте, который отвечает за работу этой карусельки. В этом случае советую отключить ее в настройках, и попробовать использовать другие плагины. Некоторые из них можно найти тут: https://n-wp.ru/tag/anonsy.
      2. Про “Вы сказали, что CSS можно настроить плагины” не понял. Поясните, что вы имели ввиду? CSS – это оформление блога (цвет, шрифт, ширина, картинки, отступы …), а плагины – это плагины. Посмотрите в папке с темой – там должен быть как минимум один файл с расширением css – в нем как раз и прописано все это.

      Ответить
  2. Владимир

    я ошибся про слово плагины. Хотел сказать постовые. Как настроить CSS дайте пару советов. Я знаю, что эти непонятные буковки есть в теме блога, но не понимаю, как это все работает.
    Кстати вот вам подарок http://idearu.com/xotite-nachat-biznes-v-internete-rekomenduyu-poleznyj-sajt/
    Там пока тегами закрыта ссылка, может обменяемся ссылками? Не сложно будет постовой поставить на мой сайт с анкором “Бизнес идеи”?

    Ответить
    1. Чтобы оформить постовой, посмотрите вот эти записи:
      Как красиво оформить постовой | Плагин «Постовой»: https://n-wp.ru/kak-krasivo-oformit-postovoj-plagin-postovoj/
      Как красиво оформить текст | Несколько CSS-примеров: https://n-wp.ru/kak-krasivo-oformit-tekst-neskolko-css-primerov/
      Как выделять постовых в блоге: https://n-wp.ru/1104
      Приведу в качестве примера код постового в этом блоге. В файл style.css я добавил специальный класс:

      .postovoy {margin:0 0 1em 0; padding:10px 10px 10px 10px; border:1px solid #eee; background:#fcfcfc;font-style:italic;font-size:0.85em;line-height:1.4em; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px;}

      Если мне нужно вставить постовой, я его оформляю так:

      <DIV class="postovoy">текст постового</DIV>

      Результат можете увидеть в конце текста предыдущей публикации.
      А вообще, CSS – это отдельная, большая тема, непосредственно связанная с разработкой сайтов. Она требует вдумчивого изучения.
      По поводу обмена ссылками: хоть это и не в моих правилах, но я подумаю.

      Ответить
  3. Владимир

    Прошу прощенья, что достаю вопросами не по теме.

    1
    .postovoy {margin:0 0 1em 0; padding:10px 10px 10px 10px; border:1px solid #eee; background:#fcfcfc;font-style:italic;font-size:0.85em;line-height:1.4em; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px;}

    Куда именно этот код нужно вставить, учитывая, что у меня такая тема на блоге, о которой идет речь в вашей статье.
    Я могу использовать такой же вид постового на своем сайте?

    Ответить
  4. tiaurus

    Куда именно этот код нужно вставить

    Читаем еще раз предыдущий комментарий: “Приведу в качестве примера код постового в этом блоге. В файл style.css я добавил специальный класс:…”

    Ответить
  5. Владимир

    я почти во всем разобрался. Получается вводить CSS и Div
    Скажите пожалуйста, как в вашем примере изменить цвет фона постового к примеру на голубой? Если не сложно покажите пример. Я сравню и станет понятно.
    За ранее спасибо.

    Ответить
    1. tiaurus

      За цвет фона отвечает

      background:#fcfcfc;

      Пример таблицы цветов в шестнадцатиричном значении: http://ru.wikipedia.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8%D0%BF%D0%B5%D0%B4%D0%B8%D1%8F:%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0_%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2

      Ответить
  6. Владимир

    А с чем может быть связано, что я вчера несколько раз менял этот показатель. Но цвет оставался тот же?
    Я в начале подумал на кэширующий плагин, но размер шрифтов менялся мгновенно, а цвет так и оставался светлый.

    Ответить
  7. Владимир

    Все, я разобрался. Везде в палитрах стоят заглавные буквы, а нужно писать с маленьких. Изменил размер и сразу изменился цвет.
    Спасибо за рекомендации.
    И самое главное спасибо, что натолкнули на правильный ход мылси, и я наконец начал разбираться со стилями.

    Ответить
  8. Олег

    Изумительный мануал!!!Не где в рунете лучше разжёвывания по настройкам не видел!!!tiaurus дружище ты просто гуру!!
    У меня просьба к тебе возникла,не мог бы ты друг сделать такой же мануал по вот этой теме:http://www.woothemes.com/demo/spectrum/ тема шикарная!!!я её установил себе!!а с настройками запутался!!Вся прелесть в том что также как и в предыдущем посте работает без сторонних плагинов(у тебя взял за правило)!!По функционалу она почти такая же как выше в посте ты изложил!!Имеет возможность локализации но здесь я профан:((Ставил прогу для её перевода Poedit вроде файлы создались а перевод не отобразился наверно в данной программе знаний у меня маловато:(.И ещё тема имеет баги в выводе табов в виджетах они отображаются но не хотят работать:(и с слайдером тоже самое не могу разобраться!!,с отображением миниатюр!!Сижу над ней уже около 4 дней один раз до утра:)смотрю как баран на новые ворота а понять не могу в чём проблема:(Если выставишь такой мануал в переводе и с выводом ссылки выличенных проблем в коде(если имеются)то денеку закину поддержу данный пост как говорится тебе на кошелёк!!Так как тема очень сильно запала!!!Да и люди многие будут довольны!!!

    Ответить
    1. tiaurus

      Спасибо за положительный отзыв!
      Я бы сделал обзор о теме Spectrum, но она платная, стоит 75-200$, и свободно не распространяется. К тому же ее техподдержка тоже платная.

      Ответить
  9. Олег

    Друг я всё понял:)Если не хочишь обсуждать настройки и т.п.здесь, то давай через почту или асю:))386074540 и там обсудим данную проблему лично!!:)Я знаю что ты на всё способен:)!!!!

    Ответить
  10. Олег

    Мир не без добрых людей!!:)всё настроили,перевели всего 1000 рубле!!а не 70-200$ :)занимался продвинутый талантливый программист:)и мне сказали что нет таких шаблонов,тем ,которых нельзя бы выличить:)делается абсолютно ВСЁ!!!

    Ответить
    1. tiaurus

      Мои расценки на такие услуги более лояльные :) .

      Ответить
  11. Олег

    tiaurus :
    Мои расценки на такие услуги более лояльные .

    Я в этом и не сомневался что ты профи!!Но ты мне так дал понять в посте выше что типа иди лесом как говорится!!и делай за 70-200 вот мне и прешлось человека искать!!Я тебя просил по аське связаться ты не захотел а жаль:(

    Ответить
    1. 1. Я не буду заниматься ничем противозаконным. Тема платная, воровать ее я не буду.
      2. Такие вопросы, как настройка чего-либо, а тем более за отдельную плату, в комментариях не решаются.

      Ответить
  12. Николай

    tiaurus, спасибо за обзор, тема отличная, мануал не уступает ей.
    У меня маленькая просьба – не подскажешь, где а шаблоне удалить лишний пробел между панелью навигации и собсна постами?

    Ответить
    1. tiaurus

      А можно скриншот того, о чем вы говорите? А то пока что не понял, о чем речь.

      Ответить
      1. Николай

        Сам с трудом понял, что написал :)
        http://www.rsu.edu.ru/~izerli/li/1.png

        Ответить
        1. Николай

          Нет, не найдено решение?

          Ответить
          1. tiaurus

            Как говорится, это не бага, а фича. Так задумано автором темы. Если хотите изменить это расстояние, то придется серьезно перекроить всю тему, потому как панель закреплена на определенном месте, вокруг нее есть тень, к ней привязяны картинки (например, значок RSS). А это не дело двух минут, и уж совсем не бесплатное дело.

            Ответить
            1. Николай

              Спасибо! Будет чем заняться.

              Ответить
  13. Yana

    Спасибо! Очень дельная статья!
    Возник вопрос, не подскажите, а как там шритф изменить? Хочу чтоб везде был одинаковый, как на главной в шапке. А то сейчас шрифты разные.

    Ответить
  14. Yana

    Я изменила стили, думла что-то еще надо. Нет, через пару минут шрифты изменились.

    Ответить
  15. Yana

    Добрый день.
    Внимательно прочла тему, и комментарии. Но не меняется он, хоть убейте. Ткните меня носом, умоляю. Умаялась вся))))
    Раньше пыталась

    Ответить
    1. tiaurus

      Что не меняется? В настройках темы есть выбор шрифта.

      Ответить
      1. Yana

        Почему то думала, что озвучил, что проблема в смене фона. Он темный, я хочела другой.

        Ответить
        1. Вы знаете, я без труда поменял фон с черного на белый, используя настройки темы.

          Ответить
          1. Yana

            Я так же меняла. Вся проблема в том, что в Explorer сменился фон, а вот в Firefox цвет прежний. Не меняется.

            Ответить
            1. tiaurus

              А очистить кэш блога не пробовали? Неплохо бы и кэш браузера так же очистить (Ctrl+Shift+Del).

              Ответить
              1. Yana

                Хм… А вот про это я и забыла))) Попробую.
                Спасибо Вам за помощь)

                Ответить
  16. Yana

    и через дизайн, и в CSS меняла…

    Ответить
    1. Сергей

      Знаете, у меня вышеназванная проблема – замена фона, браузер Opera 10.60. Или раньше не замечал или она обновилась. Все было с фоном хорошо – как у вас, но вот сейчас в Opera буквально хлопает черный фон. При переходе по пунктам меню -вверху. Я подменил файл header.jpg сталохлопать на нижней половине окна. Чуш какая-то. Кэши вытирал. Снимок экрана выслать не могу – потому как “хлопает” – появляется на мгновение.
      Может у вас будет минутка и желание разобраться?

      Ответить
      1. tiaurus

        Возможно, что в качестве header.jpg используется неоптимизированный рисунок (очень большой по размеру или тяжелый во весу). Он не успевает загрузиться полностью, когда как все остальное содержимое уже загружено. Вот и хлопает.

        Ответить
  17. Like

    отличная тема, только я её немного расширил, чтобы было место для второй колонки:) пришлось покапапться в style.css

    Ответить
  18. Anton

    Здравствуйте! Впервые вижу такое подробное описание настроек шаблона для WordPress!) Был удивлён такой великолепной работой автора) Тема замечательная, давно использую, но пару дней назад возникла проблема.
    При нажатии на rss, вылетает сообщение:

    Ошибка разбора XML: синтаксическая ошибка

    515:
    516:
    517:

    518:

    519:

    Не могу разобраться в чём дело. И что за скрипт такой на 518 строке (который и является ошибкой)?

    Ответить
    1. tiaurus

      На 518 строке у вас пустота :) Попробуйте добавить код в комментарий с помощью ссылки “вставить код”.

      Ответить
  19. Anton

    Скрин ошибки к каменту выше

    Ответить
    1. Похоже, что ваш блог заражен. Вот несколько ссылок, которые советую очень подробно изучить:
      http://joomlaforum.ru/index.php?topic=127235.0
      http://sucuri.net/malware/entry/MW:JS:152

      Ответить
      1. Anton

        Спасибо большое, уже предпринял меры!) Скоро справлюсь с хаком)

        Ответить
  20. Виктор

    Шикарный обзор, просто шикарнейший. Автор, ты большой молодец, что приложил столько труда!

    Ответить
  21. bad-05.id.mail.ru/

    Извиняюсь за прошлый комментарий! В теме есть баги, например если больше 1 комментария то пишется 2 comments, а еще дата не склоняется

    Ответить
    1. А вы оригинальную тему используете или переведенную?

      Ответить
      1. bad-05.id.mail.ru/

        Переведенную. В оригинальной я так понимаю нет русского языка?

        Ответить
        1. Русского языка нет. Но и таких багов тоже нет.

          Ответить
          1. bad-05.id.mail.ru/

            Так это понятно, что нет. Они только в переведенной, а вы не знаете есть ли полностью переведенная?А еще в Chrome на главной не показываются картинки Твиттера и RSS в правом верхнем углу и текст справа от логотипа серый(хотя цвет стоит другой)

            Ответить
            1. В оригинальной английской версии я таких багов не заметил.
              Я сам делаю переводы тем, поэтому не ищу переведенные темы. Мне так надежнее.

              Ответить
  22. N.N.

    Круто. Спасибо за проделанную работу!

    Ответить
  23. N.N.

    Подскажите пожалуйста. Я использую плагин WP-PostRatings. Не могу найти в файлах шаблона, как мне сделать так, чтобы он(плагин) не отображался на главной, а только внутри поста. Сейчас так:
    [img]http://4put.ru/pictures/max/73/225753.jpg[/img]
    ..это прямо с главной доступно.
    З.Ы. В настройках плагина, нет возможности настроить место его отображения.

    Ответить
    1. А вы куда вставляете код вывода? И как выводите? Лучше выводить с помощью кода.
      Добавьте
      <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
      только в single.php – тогда голосовалка будет отображаться только в отдельном посте.

      Ответить
      1. N.N.

        Да вот в том то и дело, что никуда код вывода не вставлял. Экспериментировал с переустановкой плагина(базу чистил в том числе от его остатков), с разными вариантами опции "Предпоказ записи" ..но видимо это мой частный случай, удачный :)

        Ответить
        1. В настройках плагина указано выводить голосовалку автоматически?

          Ответить
          1. N.N.

            В нем нет подобной опции

            Ответить
            1. Значит ищите в шаблоне вывод.

              Ответить
  24. Владимир

    Не могу найти, где в style.css регулируется отступ оснвоного поля от линии списка страниц (меню) и как кнопки сделать по центру , а не прижатыми к левой части страницы..

    Ответить
  25. aLx

    Огромное спасибо за тему и за описание к ней!

    Ответить
    1. Пожалуйста – пользуйтесь!

      Ответить
  26. kamensky

    Почему-то отображается пустая статья, никакого содержимого!

    Ответить
    1. F5!

      Ответить
  27. kandar

    Нашел практически все ответы! Благодарю Вас за проделанную работу! Видно, что Вы – профи!

    У меня такой вопрос: как можно Название блога в шаблоне изменить в цвете? По умолчанию оно белое, а при наведении красное. Я хотел бы сделать другие цвета. Как это осуществить?

    Ответить
  28. kandar

    А еще – у меня почему-то в этой теме не работает плагин Like Vkontakte((

    Ответить
  29. ngage

    а где ссылка на скачивание? :(

    Ответить
    1. Посмотрите на первые два слова поста.

      Ответить
  30. temo4kin

    Хотел установить тему себе… Но постоянно сталкиваюсь с неприятными моментами при настройке…
    При открытии одной записи кнопки “Добавить” просто нет, она обрезалась.
    Если нажать “Комментарий”, то поле для добавления комментария появляется полностью, но пропадает верх страницы вместе с боковой колонкой.
    С чем это может быть связано? Такое ощущение, как будто где-то очень жестко прописан размер блока для вывода одной записи, но я не смог найти где это сделано.

    Ответить
  31. els

    Здравствуйте, а как переименовать виджеты? У меня показывает Categories, а хотелось бы просто “Рубрики”, да и все виджеты чтобы были на русском?

    Ответить
  32. Раиса

    Добрый вечер! Хотела увеличить шрифт в шаблоне этой темы. Из всех комментариев, поняла как это сделать, но когда вошла во вкладку CSS, она была пуста, а по верху вот такая запись:
    “Здесь вы можете переопределить правила CSS, прописанные в файле css/core.css ! Этот файл я открыла, но там предупреждение – “Не редактируйте этот файл! (или любые другие файлы из этого пакета)
    Создать тему детского или использовать опции тему, чтобы сделать изменения!” Дайте пожалуйста подсказку, как мне поступить дальше? И этот блок CSS – должен быть пустым?

    Ответить
    1. tiaurus автор

      Попробуйте отредактировать файл core.css, предварительно сделав резервную копию.

      Ответить
  33. александр

    Добрый день, подскажите пожалуйста какая строчка в файле core.css отвечает за фон под текстом в контенте, 433-отвечает за цвет заголовка сайта а вот фон под текстом везде белый а хотелось бы другой

    Ответить
  34. Владимир

    Добрый день. У меня стоит движок Word Press 4.7. При настройке темы Mystique я случайно нажал кнопку “удалить” напротив строчки” Фавикон” и после этого мой 3-колоночный сайт стал 1- колоночный. Все попытки вернуть его в первоначальное состояние ни к чему не привели. Как мне быть? Заранее благодарен. В. Черненко

    Ответить
  35. Андрей

    У меня не настраивается Шаблон страницы: выбираю Три колонки – Сохранить – всё бесполезно! Отключил все плагины и всё равно! Устанавливал одну колонку, три колонки сайдбары справа, слева – никаких изменений!

    Ответить