【问题标题】:Enable / Activate shortcodes within homemade wordpress spoiler plugin在自制的 wordpress 剧透插件中启用/激活简码
【发布时间】:2015-11-03 17:05:20
【问题描述】:

简码(终极版)在自制的 wordpress 剧透中不起作用

(P.S.:以上是我的问题的初始标题。我已将其改写为更笼统)

我的问题:

我根据this tutorial 制作了一个自制的剧透。它工作得很好。然而,当它们在剧透中时,短代码最终的短代码不起作用:它只是将它们的源代码显示为纯文本。

我的问题是如何在我的剧透中“启用”这些简码?

例如:Spoiler unfolded


我的代码:

  • WP 页面

    [su_button url="http://www.my-url.com/wp-content/uploads/2015/01/fileName.txt" download = "FileName.txt" background="#FF6B53" size="2" icon="icon: download" rel="download = 'fileName'"]download[/su_button]
    
    [dag_spoiler title="My spoiler"]
        [su_button url="http://www.my-url.com/wp-content/uploads/2015/01/fileName.txt" download = "FileName.txt" background="#FF6B53" size="2" icon="icon: download" rel="download = 'fileName'"]download[/su_button]
    [/dag_spoiler]
    

    (两个按钮完全相同)

  • 自制剧透简码

PHP 代码

<?php
/**
 * @package dag_spoiler
 * @version 0.1
 */
/*
Plugin Name: ebo Spoiler
Plugin URI: http://designerandgeek.com/dag-spoiler
Description: Spoilers!
Author: ebo ft. Designer and Geek
Version: 0.1
Author URI: http://designerandgeek.com/
*/


/**
* Adds a spoiler shortcode to WordPress.
* 
* @return   none    outputs HTML
*/

function dag_spoiler_func( $atts, $content = null ) {
    $default_title = __('Spoiler alert!');
    $helptext_show = __('fa-plus');
    $helptext_hide = __('fa-minus');
    extract( shortcode_atts( array(
    'title' => 'Click to show spoiler',
    ), $atts ) );
    $spoiler = 
    '<div class="dag_spoiler">' .
    '<p class="dag_spoiler_header" ' . 
    'data-dag-spoiler-show="' . $helptext_show .'" '.
    'data-dag-spoiler-hide="' . $helptext_hide . '">' . $title . '</p>' .
    '<div class="dag_spoiler_content">' .

    $content . 
    '</div>' . 
    '</div>';

    return $spoiler;
}
add_shortcode( 'dag_spoiler', 'dag_spoiler_func' );

/*EOF*/

/**
 * Enqueue plugin css and javascript
 */

add_action( 'wp_enqueue_scripts', 'dag_enqueue' );
function dag_enqueue() {
    wp_register_style( 'dag-spoiler-style', plugins_url('/ebo-spoiler.css', __FILE__) );
    wp_enqueue_style( 'dag-spoiler-style' );
    wp_register_script( 'dag-spoiler-js', plugins_url('/ebo-spoiler.js', __FILE__) );
    wp_enqueue_script( 'dag-spoiler-js' );
}
add_action( 'wp_enqueue_scripts', 'dag_enqueue' );
?>

JS源码

jQuery(document).ready( jQuery(function( $ ) {
    $(".dag_spoiler_header").each(function(){
    $(this).click( function() {
        var help_text_span = $(this).children('span.dag_spoiler_help_text');
        $(this).siblings('.dag_spoiler_content').slideToggle( "slow", function() {
        help_text_span.html(
            help_text_span.html() == '<i class="fa '+hide_text+'"></i>' ? '<i class="fa '+show_text+'"></i>' : '<i class="fa '+hide_text+'"></i>'
        );
        });
    });
    var show_text = $(this).attr('data-dag-spoiler-show');
    var hide_text = $(this).attr('data-dag-spoiler-hide');
    $(this).prepend(' <span class="dag_spoiler_help_text" style="margin-right: 15px; margin-left: 5px; font-size: 14px;"> <i class="fa '+show_text+'"></i></span>');
    });
}));

(只是为了详尽)CSS

.dag_spoiler {
    margin: .5em 0 .5em 0;
}

.dag_spoiler .dag_spoiler_header {
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    min-height: 20px;
    padding-bottom: 7px;
    padding-left: 0;
    padding-right: 7px;
    padding-top: 7px;
    position: relative;
    font-weight: bold;
}

.dag_spoiler .dag_spoiler_header::before {
    font-family: FontAwesome;
    font-weight: normal;
    margin-left: 5px;
    margin-right: 15px;
}

.dag_spoiler div.dag_spoiler_content {
    padding-left: 7%; 
    padding-right: 7%;
    display: none;
}

【问题讨论】:

    标签: php html css wordpress


    【解决方案1】:

    尝试添加

    do_shortcode($content)
    

    在您的剧透短代码中。像这样:

    <?php
    /**
     * @package dag_spoiler
     * @version 0.1
     */
    /*
    Plugin Name: ebo Spoiler
    Plugin URI: http://designerandgeek.com/dag-spoiler
    Description: Spoilers!
    Author: ebo ft. Designer and Geek
    Version: 0.1
    Author URI: http://designerandgeek.com/
    */
    
    
    /**
    * Adds a spoiler shortcode to WordPress.
    * 
    * @return   none    outputs HTML
    */
    
    function dag_spoiler_func( $atts, $content = null ) {
        $default_title = __('Spoiler alert!');
        $helptext_show = __('fa-plus');
        $helptext_hide = __('fa-minus');
        extract( shortcode_atts( array(
        'title' => 'Click to show spoiler',
        ), $atts ) );
        $spoiler = 
        /*'<style>'.
        '.dag_spoiler .dag_spoiler_header::before {'.
            'data-dag-spoiler-show="'. $helptext_show .'" '.
            'data-dag-spoiler-hide="'. $helptext_hide.'" '.
        '}'.
        '</style>'.*/
        '<div class="dag_spoiler">' .
        '<p class="dag_spoiler_header" ' . 
        'data-dag-spoiler-show="' . $helptext_show .'" '.
        'data-dag-spoiler-hide="' . $helptext_hide . '">' . $title . '</p>' .
        '<div class="dag_spoiler_content">' .
        /*'<p class="dag_spoiler_header">'. $title . '</p>' .
        '<div class="dag_spoiler_content">' .*/
        do_shortcode($content) . 
        '</div>' . 
        '</div>';
    
        return $spoiler;
    }
    add_shortcode( 'dag_spoiler', 'dag_spoiler_func' );
    
    /*EOF*/
    
    /**
     * Enqueue plugin css and javascript
     */
    
    add_action( 'wp_enqueue_scripts', 'dag_enqueue' );
    function dag_enqueue() {
        wp_register_style( 'dag-spoiler-style', plugins_url('/ebo-spoiler.css', __FILE__) );
        wp_enqueue_style( 'dag-spoiler-style' );
        /*wp_enqueue_script( 'jquery' );*/
        wp_register_script( 'dag-spoiler-js', plugins_url('/ebo-spoiler.js', __FILE__) );
        wp_enqueue_script( 'dag-spoiler-js' );
    }
    add_action( 'wp_enqueue_scripts', 'dag_enqueue' );
    ?>
    

    【讨论】:

    • 就是这样! (对于我未来的傻瓜:我用@dingo_d的解决方案替换了php代码的第36行。)非常感谢!
    • 欢迎投票并接受我的回答 :) 乐于助人
    • 好吧,这有点尴尬:这个解决方案有效(即按钮出现在剧透中)......但会生成一个 wp-admin 空白页面!
    • 当你点击按钮或扰流板时?打开您的调试以查看是否有任何消息。我还建议使用手风琴作为“剧透”短代码,因为 wordpress 支持可以处理手风琴的 jquery-ui。
    • [第二个问题已解决] 是在我激活这个插件的时候,在这个非常特殊的更改之后,我无法登录www.my-site.com/wp-admin,因为这个页面是空白的。但是,我的错,我解决了这个问题:我复制粘贴了代码,而后者的每一行都缩进了 4 个空格。产生错误的是整个php 代码的缩进。对不起...谢谢!
    猜你喜欢
    • 1970-01-01
    • 2015-09-06
    • 1970-01-01
    • 2014-11-05
    • 2022-01-21
    • 2017-11-11
    • 2015-08-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多