Поддержка Проблемы и решения Ошибка создания шорткода

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

    永子

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

    Модератор Yuri

    (@yube)

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

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

    Это слово BOM.

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

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

    <?php
    function my_shortcode_thanks ( $attr, $content = null ) {
    
    echo <<<HTML
    <div class='container'>
    .....
    <style>
    .....
    </style>
    HTML;
    }
    ?>
    Модератор Yui

    (@fierevere)

    永子

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

    Модератор Yuri

    (@yube)

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

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

    <?php
    function my_shortcode_thanks ( $attr, $content = null ) {
    
    return <<<HTML
    .....
    HTML;
    }
    ?>
    

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

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

    • Ответ изменён 4 года, 7 месяцев назад пользователем jurvrn.
    Модератор Yuri

    (@yube)

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

    screenshot

    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)

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

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

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

    Юрий (@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)

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

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

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

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

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

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

    тема решена

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Тема «Ошибка создания шорткода» закрыта для новых ответов.