bizbudding / wampum-popups

A lightweight but flexible WordPress popups plugin utilizing on oiubounce
11 stars 3 forks source link

HTML Readme #3

Open swise23 opened 7 years ago

swise23 commented 7 years ago

<h1>Wampum Popups Plugin</h1>
    <h2>Description</h2>
        <p>A lightweight but flexible WordPress popups plugin utilizing [oiubounce](https://github.com/carlsednaoui/ouibounce).</p>
            <ul>
                <li>Use a simple shortcode (or PHP function) to create 1 or more popups (or slideups) throughout your website</li>
                <li>Popup types include exit itent, timed, link, and button</li>
                <li>Automatically works with WordPress galleries (when set to link to file or attachment page)</li>
                <li>Default exit intent and timed popups store an expiring cookie in the browser so it won't continue to display after a user closes it</li>
                <li>Various options allow fine-tuning (see below)</li>
                <li>Easy plugin updates in the WordPress Dashboard via [GitHub Updater plugin](https://github.com/afragen/github-updater)</li>
            </ul>
    <h2>Screenshots</h2>
        <img src="/assets/wampum-popups-modal.jpg" alt="Wampum Popups modal example">
        <img src="/assets/wampum-popups-slideup.jpg" alt="Wampum Popups slideup example">
    <h2>Shortcodes</h2>
        <table>
            <tr>
                <th>Shortcode</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>[wampum_popup]</td>
                <td>Launches a popup window</td>
            </tr>
        </table>
    <h2>Required Parameters</h2>
        <table>
            <tr>
                <th>Parameter Name</th>
                <th>Expected Value</th>
                <th>Default State</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td>type</td>
                <td>string (exit | timed | link | button)</td>
                <td>null</td>
                <td>Type of popup. This is the only required parameter.</td>
                <td>type=“exit”</td>
            </tr>
        </table>
    <h2>Optional Parameters</h2>
        <table>
            <tr>
                <th>Parameter Name</th>
                <th>Expected Value</th>
                <th>Default State</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td>close_button</td>
                <td>boolean (true/false)</td>
                <td>true</td>
                <td>Show the close button.</td>
                <td>close_button=“true”</td>
            </tr>
            <tr>
                <td>close_outside</td>
                <td>boolean (true/false)</td>
                <td>true</td>
                <td>Close popup by clicking outside the modal.</td>
                <td>close_outside=“false”</td>
            </tr>
            <tr>
                <td>style</td>
                <td>string (modal | slideup)</td>
                <td>modal</td>
                <td>Style of the popup</td>
                <td>style=“modal”</td>
            </tr>
            <tr>
                <td>text</td>
                <td>string</td>
                <td>null</td>
                <td>The link/button text when using `wampum_popup_link()` function</td>
                <td>text="Click Here!"</td>
            </tr>
            <tr>
                <td>time</td>
                <td>integer</td>
                <td>4000</td>
                <td>Time in milliseconds. 4000ms = 4s</td>
                <td>time="4000"</td>
            </tr>
            <tr>
                <td>logged_in</td>
                <td>boolean (true | false)</td>
                <td>false</td>
                <td>Show only to logged in users.</td>
                <td>logged_in="false"</td>
            </tr>
            <tr>
                <td>logged_out</td>
                <td>boolean (true | false)</td>
                <td>false</td>
                <td>Show only to logged out users.</td>
                <td>logged_out="false"</td>
            </tr>
            <tr>
                <td>width</td>
                <td>string (400px|auto|calc(100vw - 5%))</td>
                <td>400px</td>
                <td>Max width of the popup, formatted for CSS `max-width: 400px;` spec. Helps for custom designs, larger    images, videos, or to make slideups not so weird if too big.</td>
                <td>width="calc(100vw - 5%)"</td>
            </tr>
        </table>
    <h2>OUIBOUNCE Parameters</h2>
        <p>These args are specific to the [oiubounce](https://github.com/carlsednaoui/ouibounce) script. Most of these won't be used very often, so only a few are documented here</p>
        <table>
            <tr>
                <th>Parameter Name</th>
                <th>Expected Value</th>
                <th>Default State</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td>aggressive</td>
                <td>boolean (true | false)</td>
                <td>false</td>
                <td>Force the popup to show, always. Don't be annoying.</td>
                <td>aggressive="true"</td>
            </tr>
        </table>
    <h2>Usage Examples</h2>
            <code>[wampum_popup type="exit" style="modal"]HTML content here[/wampum_popup]</code>
        <h3>Manually launch a popup with a link/button in the WP editor</h3>
            <code style="display: block;white-space: pre-wrap">
[wampum_popup type="link" text="Click Here"]HTML content here [/wampum_popup]
[wampum_popup type="button" text="Click Here"]HTML content here [/wampum_popup]
            </code>
        <h3>WordPress Galleries</h3>
            <p>Create a gallery and "Link To" either "Attachment Page" (not sure why anyone would ever do this) or "Media File". Wampum Popups filters the attachement image or permalink URL and uses the 'large' image size in place.</p>
    <h2>Advanced Usage</h2>
        <p>This example showing the ability to use multiple/different popups on the same site.</p>
            <code style="display: block;white-space: pre-wrap">
                {
/**
 * Display different popups on different sections of the site
 * 'cookieName' param is used to make the popups act independently
 * if cookieName was the same (this is default behavior) and the user viewed one popup,
 * they wouldn't see the other until the cookie expired.
 *
 * @uses Wampum - Popups plugin
 *
 * @return void
 */
add_action( 'wampum_popups', 'prefix_do_wampum_popups' );
function prefix_do_wampum_popups() {

    // Show this popup on posts
    if ( is_singular('post') ) {
        $content = '<p>My post popup content here</p>';
        $args    = array(
            'cookieName' => 'prefix_posts_popup_viewed'
            'type'       => 'exit',
            'style'      => 'modal',
        );
        wampum_popup( $content, $args );
    }

    // Show this popup on pages
    if ( is_singular('page') ) {
        $content = '<p>My post page content here</p>';
        $args    = array(
            'cookieName' => 'prefix_pages_popup_viewed'
            'type'       => 'timed',
            'style'      => 'slideup',
        );
        wampum_popup( $content, $args );
    }

}
}
            </code>
</html>
JiveDig commented 7 years ago

Thanks @swise23

Referencing how I added this on Wampum Forms for when I do this: https://github.com/bizbudding/wampum-forms/blob/master/includes/class-settings.php