Всем привет. Сегодня я начинаю серию статей (она будет состоять только из 2), в которых мы рассмотрим, как можно получить короткую ссылку на Вашу статью WordPress. Вы в курсе, что если установить ЧПУ в WordPress, то ссылки на каждую статью будут огромными (не на все, но будут). Некоторые пользователи, например, хотят разместить ссылку на Вашу статью, у себя на сайте, или в твиттер-аккаунте, но когда копируют, получается слишком длинная. Но это не беда, WordPress предоставляет нам возможность получить короткие ссылки для каждой статьи, даже если у нас активированы ЧПУ.

Вы поняли мою задумку: я хочу, чтобы в каждой статье, автоматически добавлялась короткая ссылка к статье. Есть множество сервисов, которые укорачивают ссылки, но зачем использовать их, если WordPress сам предоставляет такую возможность.

Начнем мы с того, что создадим аккордеон в WordPress, а точнее в каждой статье, будет он выглядеть у меня следующим образом:

После каждой статьи у меня будет вот такой аккордеон. Я еще раньше писал про WidgetKit+Wordpress, там рассказывал, что можно делать красивые аккордеоны в WordPress в ручном режиме, но сегодня не об этом, сегодня мы создадим аккордеон вручную, при помощи HTML и CSS, поэтому ничего лишнего.

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

Исходный код

#container {
    width: 600px;
    margin: 20px auto;
}
#accordion .item {
    width: 100%;
    height: 30px;
    overflow: hidden;
 
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
 
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
 
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 30px;
    padding: 5px;
}
#accordion div:hover {
    height: 90px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
 
/* Радиус скругления углов первой секции */
#intro {
    border-radius: 2px 2px 0 0;
}
 
/* Радиус скругления углов последней секции */
#contact {
    border-radius: 0 0 3px 3px;
}
#contact:target {
    border-radius: 0;
}
 
/* Высоты секций */
#intro:target + p {
    height: 70px;
}
#info:target + p {
    height: 200px;
}
#contact:target + p {
    height: 167px;
}

После этого можно приступать к выводу самого аккордеона, для этого открываем файл single.php и в том месте, где Вы хотите его выводить необходимо добавить следующий код:

Исходный код

<div id="container">
  <div id="accordion">
    <div class="item">
      <a href="#">Получить короткую ссылку статьи</a>
      <p>
		Скоро все будет
      </p>
    </div>
  </div>
</div>

Сколько Вам полей необходимо, столько Вы и добавляете у себя, ну а теперь просто можете протестировать его у меня на сайте, в каждой статье. Вот и все, теперь Вы в курсе как создать аккордеон для WordPress без плагинов  и скриптов на чистом HTML+CSS. В следующей статье мы рассмотрим, как можно прикрутить короткую ссылку к аккордеону. Причем такой аккордеон Вы можете использовать не только для данных целей, но и для вывода любой другой информации в каждой статьи, я его решил использовать именно так.