Ошибка создания шорткода | WordPress.org Русский

Решено

(@jurvrn)

wordpress при активации плагина шорткода выдал такое предупреждение

«Плагин создал 3 символа неожиданного вывода при активации. Если возникнет ошибка “headers already sent” с RSS-лентами или иные проблемы, то попробуйте деактивировать или удалить этот плагин.»

сам плагин:

<?php
/*
Plugin Name: Шорткод
*/

add_shortcode ( 'thanks', 'my_shortcode_thanks' );

function my_shortcode_thanks ( $attr, $content = null ) {

return <<<HTML
<div class='container'>
    <section class='ac-container'>
        
        <div>
            <input id='ac-1' name='accordion-1' type='checkbox' />
            <label for='ac-1'>О нас</label>
            <article class='ac-small'>
                <p>Well, the way they make shows is, they make one show. That show's cato make more shows.</p>
            </article>
        </div>

        <div>
            <input id='ac-2' name='accordion-1' type='checkbox' />
            <label for='ac-2'>Наши работы</label>
            <article class='ac-medium'>
                <p>I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order </p>
            </article>
        </div>
        
        <div>
            <input id='ac-3' name='accordion-1' type='checkbox' />
            <label for='ac-3'>Ссылки</label>
            <article class='ac-large'>
                <p>Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... </p>
            </article>
        </div>

        <div>
            <input id='ac-4' name='accordion-1' type='checkbox' />
            <label for='ac-4'>Контакты</label>
            <article class='ac-large'>
                <p>You see? It's curious. Just as a matter of deductive logic. </p>
            </article>
        </div>
    </section>
</div>

<style>
    a{
        color: #333;
        text-decoration: none;
    }
    .container{
        width: 100%;
        position: relative;
        text-align: center;
    }
    .clr{
        clear: both;
    }
    
    .ac-container{
        width: 600px;
        margin: 10px auto;
        text-align: center;
    }
    .ac-container label{
        font-family: 'Arial Narrow', Arial, sans-serif;
        font-size: 13px;
        position: relative;
        z-index: 20;
        display: block;
        height: 30px;
        cursor: pointer;
        color: #777;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
        line-height: 33px;
        background: #ffffff;
        background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
        background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
            background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
            background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
            background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
        box-shadow:
            0px 0px 0px 1px rgba(155,155,155,0.3),
            1px 0px 0px 0px rgba(255,255,255,0.9) inset,
            0px 2px 2px rgba(0,0,0,0.1);
    }
    .ac-container label:hover{
        background: #fff;
    }
    .ac-container input:checked + label,
    .ac-container input:checked + label:hover{
        background: #c6e1ec;
        color: #3d7489;
        text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
        box-shadow:
            0px 0px 0px 1px rgba(155,155,155,0.3),
            0px 2px 2px rgba(0,0,0,0.1);
    }
    .ac-container label:hover:after,
    .ac-container input:checked + label:hover:after{
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        right: 13px;
        top: 7px;
        background: transparent url(../images/arrow_down.png) no-repeat center center;
    }
    .ac-container input:checked + label:hover:after{
        background-image: '\029';
    }
    .ac-container input{
        display: none;
    }
    .ac-container article{
        background: rgba(255, 255, 255, 0.5);
        margin-top: -1px;
        overflow: hidden;
        height: 0px;
        position: relative;
        z-index: 10;
        -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
        transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    }
    .ac-container article p{
        font-style: italic;
        color: #777;
        line-height: 23px;
        font-size: 14px;
        padding: 20px;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    }
    .ac-container input:checked ~ article{
        -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
        box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
    }
    .ac-container input:checked ~ article.ac-small{
        height: 140px;
    }
    .ac-container input:checked ~ article.ac-medium{
        height: 180px;
    }
    .ac-container input:checked ~ article.ac-large{
        height: 230px;
    }
</style>
HTML;
}
?>

Просмотр 13 ответов — с 1 по 13 (всего 13)

Модератор

Yui

(@fierevere)

永子

4 года, 9 месяцев назад

перед <?php и после ?>
не должно быть лишних символов (включая пробелы и перевод строки)

Модератор

Yuri

(@yube)

4 года, 9 месяцев назад

3 символа неожиданного вывода

О! я знаю плохое слово из трех букв!

Это слово BOM.

Попробуйте пересохранить файл в utf-8 без BOM. Да и «хвост», начиная с ?> я бы убрал.

Автор

jurvrn

(@jurvrn)

4 года, 9 месяцев назад

Yui (@fierevere), Юрий (@yube) убрал хвост, пересохранил без BOM — без ошибок! и проблема с коверканием стилей других шорткодов прошла. Но правильно ли я делаю вот так?

<?php
function my_shortcode_thanks ( $attr, $content = null ) {

echo <<<HTML
<div class='container'>
.....
<style>
.....
</style>
HTML;
}
?>

Модератор

Yui

(@fierevere)

永子

4 года, 9 месяцев назад

если работает, то правильно )

Модератор

Yuri

(@yube)

4 года, 9 месяцев назад

Но правильно ли я делаю вот так?

Вообще-то, нет. Обработчик шорткода должен возвращать значение, а не выводить.

<?php
function my_shortcode_thanks ( $attr, $content = null ) {

return <<<HTML
.....
HTML;
}
?>

Для отдельно стоящего вызова из шаблона типа
<php echo do_shortcode('[my_shortcode_thank']); ?>
разницы нет.
А для шорткода внутри контента записи разница принципиальная: с return вставится вместо шорткода, с echo|print — выведется перед контентом.

Автор

jurvrn

(@jurvrn)

4 года, 9 месяцев назад

Yui (@fierevere) работает, потому что просто угадал что шорткод одиночного вызова, а не внутри контента
Юрий (@yube), спасибо, пояснили о чем догадывался и слышал, но не понимал, но что значит в вашем значении «контент записи»?
и как будет правильно
return <<<HTML
или return '

Ответ изменён 4 года, 9 месяцев назад пользователем jurvrn.

Модератор

Yuri

(@yube)

4 года, 9 месяцев назад

что значит в вашем значении «контент записи»?

https://codex.wordpress.org/%D0%93%D0%BB%D0%BE%D1%81%D1%81%D0%B0%D1%80%D0%B8%D0%B9#Content

и как будет правильно

И так, и этак. В зависимости от того, что нужно.
Матчасть: PHP: Строки — Manual

Модератор

Yuri

(@yube)

4 года, 9 месяцев назад

Кстати, хотел спросить: зачем Вы используете шорткод в шаблоне, то есть там, куда можно просто вставить тот же самый html, который возвращает шорткод?

Автор

jurvrn

(@jurvrn)

4 года, 9 месяцев назад

Юрий (@yube), по php почитал, много понял, жаль нет времени изучить теорию, только во время «практики» получается изучать

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

Автор

jurvrn

(@jurvrn)

4 года, 9 месяцев назад

Юрий (@yube), вот конкретный случай: можно приведу весь свой плагин? Я его смог заставить работать только так — через echo <<<. Возможно есть более правильный путь? Есть еще вариант как ob_start () использовать….? Как правильно?

<?php

add_action('widgets_init', 'my_widget_func_new_item');

function my_widget_func_new_item() {
    register_widget('my_widget_new_item');
}

class my_widget_new_item extends WP_Widget
{
    function __construct()
    {
        parent::__construct(
            'my-widget-new-item-tabs',
            'Виджет "Добавить на сайт запись"',
            array('description' => 'Добавить на сайт новую запись, новость, отзыв...',)
        );
    }

    /**
     * Вывод виджета
     * @param array $args
     * @param array $instance
     */
    public function widget($args, $instance) {
        $title = apply_filters('widget_title', $instance['title']);
        echo $args['before_widget'];
        if (!empty($title))
            echo $args['before_title'] . $title . $args['after_title'];

// здесь к выводим форму
echo <<<HTML
<style>
#padd {
	weight: 0 auto;
	padding: 10px;
	background-color: #fff;
}
   .tab input, .tab-content { display: none; }
   .tab {
    font: 0.8rem/1.2 Arial, sans-serif; /* Параметры шрифта */
    border: 1px solid #e9eaec; /* Параметры рамки */
    border-radius: 3px; /* Скругляем уголки */
    color: #848994; /* Цвет текста */
    margin-bottom: 10px; /* Расстояние между пунктами */
   }
   .tab-title {
    padding: 10px; /* Поля вокруг текста */
    display: block; /* Блочный элемент */
    text-transform: uppercase; /* Все буквы заглавные */
    font-weight: bold; /* Жирное начертание */
    cursor: pointer; /* Вид курсора */
   }
   .tab-title::after {
    content: \'+\'; /* Выводим плюс */
    float: right; /* Размещаем по правому краю */
   }
   .tab-content {
    padding: 10px 20px; /* Поля вокруг текста */
   }
   .tab :checked + .tab-title {
    background-color: #50a2de; /* Цвет фона */
    border-radius: 3px 3px 0 0; /* Скругляем уголки */
    color: #fff; /* Цвет текста */
   }
   .tab :checked + .tab-title::after {
    content: \'−\'; /* Выводим минус */
   }
   .tab :checked ~ .tab-content {
    display: block; /* Показываем содержимое */
   }
  </style>
  
<div id="padd">
  <div class="accordion"> 
   <div class="tab">
    <input type="checkbox" id="tab1" name="tab-group">
    <label for="tab1" class="tab-title">Что такое HTML5?</label> 
    <section class="tab-content"> 
     <p>Под HTML5 обычно подразумевают два разных понятия:</p>
     <ul>
      <li>Это язык разметки документа, пришедший на смену HTML4 и XHTML.</li>
      <li>Это набор веб-технологий, позволяющий делать на сайте 
       всякие интересные штуки.</li>
     </ul>
    </section>
	
   </div> 
   <div class="tab">
    <input type="checkbox" id="tab2" name="tab-group">
    <label for="tab2" class="tab-title">Можно ли программировать на HTML5?</label> 
    <section class="tab-content"> 
     Нет, на HTML5 по прежнему нельзя программировать, основным языком является JavaScript. 
     Так что в разговоре лучше не упоминать, что умеешь программировать на HTML5, засмеют.
    </section> 
   </div> 
   <div class="tab">
    <input type="checkbox" id="tab3" name="tab-group">
    <label for="tab3" class="tab-title">Чем HTML5 отличается от HTML4?</label>
    <section class="tab-content">
     В HTML5 добавлены новые элементы, вроде <header>, <footer>, 
     <aside>, <article>, появилась долгожданная поддержка аудио, 
     видео и многое другое.
    </section>
   </div>
  </div>
</div>
HTML;

    echo $args['after_widget'];
}
/* конец формы и функции*/

	
/**
 * Настройка виджета. В данном случае заголовок.
 * @param array $instance
 * @return string|void
 */
    public function form($instance)
    {
        if (isset($instance['title'])) {
            $title = $instance['title'];
        } else {
            $title = 'Добавить запись на сайт';
        }
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
                   name="<?php echo $this->get_field_name('title'); ?>" type="text"
                   value="<?php echo esc_attr($title); ?>"/>
        </p>
        <?php
    }

    public function update($new_instance, $old_instance)
    {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

?>

Модератор

Yuri

(@yube)

4 года, 9 месяцев назад

можно приведу весь свой плагин?

Нельзя.
При необходимости опубликовать содержимое файла полностью воспользуйтесь сервисом pastebin.com или аналогичными.
П.7. Правил форума

А также п.2. «Не задавайте несколько вопросов в одной теме.»
Тема темы (извините за тавтологию) — шорткод, приведенный плагин — виджет. Это две большие разницы.

смог заставить работать только так — через echo

Потому что это виджет, он должен выводить, в отличие от шорткода.

Автор

jurvrn

(@jurvrn)

4 года, 9 месяцев назад

Юрий (@yube), спасибо, не думал что есть разница в выводе у шорткода и виджета…

Автор

jurvrn

(@jurvrn)

4 года, 9 месяцев назад

тема решена

Просмотр 13 ответов — с 1 по 13 (всего 13)

Тема «Ошибка создания шорткода» закрыта для новых ответов.