Skip to content

Instantly share code, notes, and snippets.

@jamesozzie

jamesozzie/index.php

Created November 22, 2020 22:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesozzie/1d32fe321555b78343c66a5ab45ac087 to your computer and use it in GitHub Desktop.
Save jamesozzie/1d32fe321555b78343c66a5ab45ac087 to your computer and use it in GitHub Desktop.
Download ZIP
AMP Badge
Raw
index.php
<?php
/*
Plugin Name: AMP Badge
Plugin URI: http://jamesozz.ie
Description: Showcase the performance of your AMP site with an AMP badge. Allow visitors to check your PageSpeedInsights score or direct them to amp.dev.
Author: James Osborne
Version: 1.0.0
Author URI: https://aztecdesign.ie
*/
define('JOZZAMPCERTIFY_PLUGIN_DIR', plugin_dir_path(__FILE__));
// include options file
include plugin_dir_path(__FILE__) . '/options.php';
// create custom plugin settings menu
add_action('admin_menu', 'jozzampbadge_custom_settings');
function jozzampbadge_custom_settings()
{
$page_title = 'AMP Badge';
$menu_title = 'AMP Badge';
$capability = 'manage_options';
$slug = 'jozzampbadge-settings';
$start = 'jozzampbadge_custom_settings_start';
add_options_page($page_title, $menu_title, $capability, $slug, $start);
}
// Create option settings
add_action('admin_init', 'jozzampbadge_field');
function jozzampbadge_field()
{
register_setting('jozzampbadge-settings', 'viewoption');
register_setting('jozzampbadge-settings', 'mobiledisplay');
register_setting('jozzampbadge-settings', 'hyperlinks');
}
//set the rendering options
add_action('wp_head', 'jozzampbadge_options');
function jozzampbadge_options()
{
$jozzampbadge_position = esc_attr(get_option('viewoption', '1'));
$jozzampbadge_filterURLs = esc_attr(get_option('hyperlinks', ''));
$lightboxattribute = "";
switch ($jozzampbadge_filterURLs) {
case "":
$lightboxattribute = "on='tap:my-lightbox' role='button' tabindex='0'";
break;
default:
$lightboxattribute = "target='_blank'";
}
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
echo '
<div>
<amp-lightbox id="my-lightbox" layout="nodisplay">
<div class="jozz_lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
<div class="inner" on="tap:mylightbox.open">
<h1>Better built - with AMP </h1>
The developer of this lightning fast website used AMP technology to ensure web development best practices and user first principles are applied. Valid AMP URLs can be served speedily across the globe using AMP cache.
<ul>
<li>Lazy Loaded Content</li>
<li>Inlined & minified CSS</li>
<li>Custom JavaScript Free </li>
<li>Under 75kbs CSS</li>
<li>PageSpeed Test from AMP Cache</li>
<li>No unexpected behaviour</li>
</ul>
Find out more below:<br/><br/>
<a class="button" href="https://amp.dev" target="_blank">amp.dev</a>
<a class="button" href="https://amp-wp.org" target="_blank">WordPress AMP Plugin</a>
</div>
</div>
</amp-lightbox>
</div>
<div class="jozz_ampbadge">
<div class="afampcert_div' . $jozzampbadge_position . '">
<div class="afampbadgesvgContainer" title="Optimized using AMP technology" data-tooltip-title="123" data-tooltip-position="right">
<a ' . $lightboxattribute . ' ' . (($jozzampbadge_filterURLs != '') ? 'href="' . $jozzampbadge_filterURLs . '"' : "") . ' > <svg id="ampbadgelogo" class="afampbadgesvg" xmlns="http://www.w3.org/2000/svg" >
<g fill="none" fill-rule="evenodd">
<path fill="#005AF0" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z">
</path>
<path fill="#fff" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z">
</path></g></svg>
</a>
</div>
</div></div>
';
// And the mobile placement
add_action('wp_footer', 'jozzampbadge_mobileplacement');
function jozzampbadge_mobileplacement()
{
$mobiledisplay = esc_attr(get_option('mobiledisplay', 1));
if ($mobiledisplay == 'true') {
echo '<div class="footerplacement">
<svg id="ampbadgelogo" class="afampbadgesvg" xmlns="http://www.w3.org/2000/svg" >
<g fill="none" fill-rule="evenodd">
<path fill="#005AF0" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"> </path>
<path fill="#fff" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z">
</path></g></svg>
<div class="svgtext"> Optimized with AMP Technology</div>
</div>';
}
}
}
}
// Add the style
function jozzampbadge_load_plugin_css()
{
$plugin_url = plugin_dir_url(__FILE__);
wp_enqueue_style('jozz_ampbadge_style', $plugin_url . 'style.css');
}
add_action('wp_enqueue_scripts', 'jozzampbadge_load_plugin_css');
// create link to the settings page from plugins page
function jozzampbadge_plugin_settings_link($links)
{
$settings_link =
'<a href="options-general.php?page=jozzampbadge-settings.php">Settings</a>';
array_push($links, $settings_link);
return $links;
}
$plugin = plugin_basename(__FILE__);
add_filter("plugin_action_links_$plugin", 'jozzampbadge_plugin_settings_link');
Raw
options.php
<?php
//show this settings page
function jozzampbadge_custom_settings_start()
{
?>
<div class="wrap jozzampbadge_adminwrap">
<h1>AMP Badge</h1>
Showcase the performance of your AMP site with an AMP badge. Link it to PageSpeedInsights or an article of achievement. <br>
<i>This plugin was built as an unofficial extension to the <a href="https://wordpress.org/plugins/amp/">WordPress AMP plugin.</a> </i>
<?php
if (isset($_POST['viewoption'])) {
echo $_POST['viewoption'];
}?>
<form method="post" action="options.php" >
<?php
$viewoption = get_option('viewoption');
$mobiledisplay = get_option('mobiledisplay');
$hyperlinks = get_option('hyperlinks');
settings_fields('jozzampbadge-settings');
?>
<table class="form-table">
<tr>
<th><label for="viewoption">Display position</label></th>
<td>
<select name="viewoption" <?php if (isset($_POST['viewoption'])) {
echo $_POST['viewoption'];
}?>>
<?php
$viewoptiondefault = "1";?>
<option value='1' <?php if ($viewoption == 1) {
echo 'selected';
}?>>Top Left</option>
<option value='2' <?php if ($viewoption == 2) {
echo 'selected';
}?>>Top Right</option>
<option value='3' <?php if ($viewoption == 3) {
echo 'selected';
}?>>Bottom Left</option>
<option value='4' <?php if ($viewoption == 4) {
echo 'selected';
}?>>Bottom Right</option>
</select>
</td>
</tr>
<tr>
<th><label for="mobiledisplay">Display footer badge on mobile?</label></th>
<td>
<input type="checkbox" name="mobiledisplay" value='true' <?php if ($mobiledisplay == 'true') {
echo 'checked';
}?> >
</td>
</tr>
<tr>
<th><label for="linknavigation">Link Navigation</label></th>
<td>
<?php
global $wp;
$current_url = home_url(add_query_arg(array(), $wp->request));
$amp_url = add_query_arg(amp_get_slug(), '', $current_url);
$psilink = "https://developers.google.com/speed/pagespeed/insights/?url=$amp_url";
$filterURLs = array(
'title' => array('Modal Popup', 'Amp-wp.org', 'PageSpeed Insights Score', 'amp.dev '),
'link' => array('', 'https://amp-wp.org', $psilink, 'https://amp.dev'),
);?>
<select name="hyperlinks" class="filterSelectBox">
<?php
foreach ($filterURLs['title'] as $key => $value) {
?>
<option value="<?php echo $filterURLs['link'][$key]; ?>" <?php if ($hyperlinks == $filterURLs['link'][$key]) {
echo 'selected';
}?>>
<?php echo $value; ?>
</option>
<?php
}?>
</select>
</td>
</tr>
<br>
</table>
<?php
submit_button();?>
</form>
</div>
<?php
}
Raw
style.css
#ampbadgelogo {
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
padding: 7px;
overflow: visible;
width: 85px;
}
.afampcert_div1 {
height: 75px;
width: 75px;
position: fixed;
z-index: 999;
background: linear-gradient(to top left, transparent 50%, #005af0 0) top left/75px 75px no-repeat, transparent;
color: white;
position: fixed;
left: 0%;
top: 0%;
}
.afampbadgesvg {
fill: #fff;
stroke: none;
}
.afampbadgesvgContainer .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.afampbadgesvgContainer:hover .tooltiptext {
visibility: visible;
}
.afampcert_div1 {
height: 75px;
width: 75px;
position: fixed;
z-index: 999;
background: linear-gradient(to top left, transparent 50%, #005af0 0) top left/75px 75px no-repeat, transparent;
color: white;
position: fixed;
left: 0%;
top: 0%;
}
.afampcert_div2 {
height: 75px;
width: 75px;
position: fixed;
z-index: 999;
background: linear-gradient(to top right, transparent 50%, #005af0 0) top right/75px 75px no-repeat, transparent;
color: white;
padding-left: 30px;
position: fixed;
right: 0%;
top: 0%;
}
.afampcert_div3 {
bottom: 0px;
height: 75px;
width: 75px;
position: fixed;
z-index: 999;
background: linear-gradient(to bottom left, transparent 50%, #005af0 0) bottom left/75px 75px no-repeat, transparent;
color: white;
padding: 30px 30px 7px 0px;
}
.afampcert_div4 {
bottom: 0px;
height: 75px;
width: 75px;
right: 0px;
position: fixed;
z-index: 888;
background: linear-gradient(to bottom right, transparent 50%, #005af0 0) bottom right/75px 75px no-repeat, transparent;
color: white;
text-align: right;
padding: 30px 0px 0 30px;
}
.jozz_lightbox {
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.jozz_lightbox .inner {
width: 500px;
height: auto;
margin: 0 auto;
background-color: #efefef;
border-radius: 10px;
padding: 25px 25px 25px 25px;
font-size: 14px;
line-height: 22px;
}
.jozz_lightbox h1 {
font-size: 26px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 14px;
border-bottom: 1px solid #ccc;
color: #494949;
margin: 10px 0px;
}
.footerplacement {
position: -webkit-sticky;
position: sticky;
width: 100vw;
height: 44px;
background-color: #005af0;
padding: 10px;
color: white;
font-size: 12px;
font-weight: bold;
padding: 7px 15px;
}
.footerplacement svg {
transform: scale(0.9);
-webkit-transform: scale(0.9);
height: 35px;
width: 35px;
float: left;
}
.svgtext {
display: inline-block;
padding: 4px 0 0 4px;
}
.jozz_lightbox ul {
list-style: none;
margin: 0.5em 0 1.5em 0em;
}
.jozz_lightbox ul li {
padding-bottom: 0px;
line-height: 20px;
margin: 0 10px 0 0;
}
.jozz_lightbox ul li:before {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='22px' height='18px' viewBox='0 0 18 28'><path fill='RoyalBlue' class='pathcolor' d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z'/></svg>");
margin-right: 10px;
margin-left: 0;
position: relative;
height: 1em;
top: 0.4em;
}
.jozz_lightbox a.button {
font-weight: bold;
border-radius: 2px;
margin-right: 8px;
background-color: RoyalBlue;
padding: 5px 10px;
color: #efefef;
font-size: 12px;
line-height: 20px;
}
.jozz_lightbox a.button:hover {
background-color: rgb(44, 44, 44);
color: #efefef;
text-decoration: none;
}
:focus {
outline: 0px dashed #232324 !important;
}
@media only screen and (max-width: 600px) {
.jozz_ampbadge {
display: none;
}
}
@media only screen and (min-width: 600px) {
.footerplacement {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment