Advertisement wrapper shortcode for WordPress

June 9, 2017bywebsevendev

The [ad] shortcode is a wrapper for third-party ad network content. Ads can be inserted straight into post content or into sidebar and footer widget areas by using a text widget. Ads wrapped in this shortcode won't be displayed on AMP pages because regular ads are not compatible with AMP (a method for inserting amp-ads is also provided with this theme).

Classes

Type	`rectangle` `banner` `leaderboard` `skyscraper` `panorama` `netboard` `billboard` `button`
Size	`small` `medium` `large` `half` `half page` `wide`
Variation	`vertical` `centered` `square` `top` `test`
Visibility	`mobile`

The Semantic UI definitions/views/ad.less component is not enabled by default. It can be enabled in the WordPress admin dashboard under Chap Theme -> Chap Compiler.

Shortcode

Basic usage

[ad medium rectangle]
  <!-- Ad Code Goes Here
  <ins class="adsbygoogle"
       style="display:inline-block;width:300px;height:250px"
       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="XXXXXXXXXX"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
  !-->
[/ad]

Common units

[ad medium rectangle test data-text="Medium Rectangle"][/ad]
[ad banner test data-text="Banner"][/ad]
[ad leaderboard test data-text="Leaderboard"][/ad]
[ad large rectangle test data-text="Large Rectangle"][/ad]
[ad half page test data-text="Half Page"][/ad]

"Test" class and "data-text" attribute can be used to verify placement.

Mobile

[ad mobile leaderboard test data-text="Mobile Leaderboard"][/ad]
[ad mobile banner test data-text="Mobile Banner"][/ad]

Mobile ads will only appear on small screens.

Rectangle

[ad vertical rectangle test data-text="Vertical Rectangle"][/ad]
[ad small rectangle test data-text="Small Rectangle"][/ad]

Button

[ad button test data-text="Button"][/ad]
[ad square button test data-text="Square Button"][/ad]
[ad small button test data-text="Small Button"][/ad]

Skyscraper

[ad skyscraper test data-text="Skyscraper"][/ad]
[ad wide skyscraper test data-text="Wide Skyscraper"][/ad]

[ad banner test data-text="Banner"][/ad]
[ad vertical banner test data-text="Vertical Banner"][/ad]
[ad top banner test data-text="Top Banner"][/ad]
[ad half banner test data-text="Half Banner"][/ad]

Leaderboard

[ad leaderboard test data-text="Leaderboard"][/ad]
[ad large leaderboard test data-text="Large Leaderboard"][/ad]
[ad billboard test data-text="Billboard"][/ad]

Panorama

[ad panorama test data-text="Panorama"][/ad]

Netboard

[ad netboard test data-text="Netboard"][/ad]

Centered

[ad centered banner test data-text="Ad"][/ad]