Today, the number of Internet users who access websites with smartphones has grown. A QR code is another way to improve the user experience through the careful use of mobile users. This article discusses a few topics, such as creating a QR code with the Google Chart and the GoQR API, add a QR permalink meta box to managed post and page screens (such as creating a meta box), How to add a QR code website link to the dashboard (such as creating a dashboard widget) and how to create a shortcodes.
What is the QR code?
The QR code or quick response code is identical to the bar code shown when wrapping multiple products. The biggest difference between them is the details of the barcode store in the horizontal direction. Here the QR code stores horizontal and vertical details. QR codes save hundreds of times more details than traditional barcodes.
Where can I use?
There are several ways to use QR codes on your WordPress sites, share encoded content, create download links, and improve your contact form with email, text messaging, and so on.
How can I create a QR Code?
Here we created a simple class that creates QR code using different methods (such as Google Charts API and GoQR) depending on the request. Please follow the basic structure of the class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
/** * QRScript class */ class QRScript { /** * QR code min size 100 and Max size 800 */ var $size = 250; //default 250 /** * API supports different encodings like Shift_JIS,'ISO-8859-1 and 'UTF-8' */ var $output_encoding = 'UTF-8'; //default UTF-8 /** * API supports different levels of debug like L,M,Q and H */ var $debug_level = 'L'; //default L /** * The width of the white border around the data portion of the code. * The default value is 4. */ var $margin = '4'; //default 4 /** * By default use google chart api, it was deprecated so alternatively we can use goqr.me api * GoQR url : http://goqr.me/api/ * GoogleChart url : https://developers.google.com/chart/infographics/docs/qr_codes * API Options - google or goqr */ var $choose_api = 'google'; /** * GoQR api url */ var $goqr_url = 'https://api.qrserver.com/v1/create-qr-code/'; /** * GoogleChart api url */ var $google_api = 'https://chart.googleapis.com/chart'; /** * Constructor. */ public function __construct() { /** *@Here we have to call a meta-box, dashboard widget and a short code hooks */ } /** * get api endpoint */ function sh_get_api_endpoint($api=" "){ //check if($api !=" "){ $this->choose_api = $api; } //check if ($this->choose_api == 'google') { //return return $this->google_api; } else { //return return $this->goqr_url; } } /** * get qr code image endpoint */ function sh_get_qr_image_size($size = 0){ //check if(!$size) { $size = $this->size; } //check if ($this->choose_api == 'google') { //return return "chs={$size}x{$size}"; } else { //return return "size={$size}x{$size}"; } } /** * get qr code data */ function sh_get_qr_code_data($data){ //check if ($this->choose_api == 'google') { //return return "chl=".urlencode($data); } else { //return return "data=".urlencode($data); } } /** * get qr code data */ function sh_get_qrcode($size,$data){ //get end point $qr_src = add_query_arg( array( "cht"=>"qr", "choe"=>$this->output_encoding, "chld"=>$this->debug_level."|".$this->margin),$this->sh_get_api_endpoint()); //set $qr_src .="&".$this->sh_get_qr_image_size($size)."&".$this->sh_get_qr_code_data($data); //return url return $qr_src; } } /** * Initiate QRScript class object */ $obj = new QRScript (); |
Note: The Google Infographics Charts API we used to create a QR code in this article was officially closed on April 20, 2012, but now it works but on Google, we can find the planned completion date I can not. Instead, I suggested supporting other free GoQR APIs.
In the above class, all the variables and methods are self-explanatory, but you only need to create methods in the class and add callback hooks at class constructor to use. Add more features using the following methods and hooks.
1.Adding QR Code Permalink Meta Box at the post or page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * Register meta boxes. */ function sh_qr_register_meta_boxes() { //set QR code Permalink add_meta_box('qrcode-meta-box-id', __('QR Code Permalink', 'shqrc'), array( $this, 'sh_qr_display_callback' ) , array('post', 'page'), 'side', 'high'); } /** * Meta box display callback. * * @param WP_Post $post Current post object - QR Code Permalink . */ function sh_qr_display_callback($post) { //get permalink $permalink = get_permalink($post->ID); //check if ($permalink != " ") { // Display QR code for post permalink echo "<img src='".$this->sh_get_qrcode(0,$permalink)."' />"; } else { echo "Please save and refresh the post to get QR code."; } } |
|
1 2 3 4 |
/** *Adding QR Code Permalink Meta Box at post or page */ add_action('add_meta_boxes',array($this, 'sh_qr_register_meta_boxes')); |
2.Adding QR Code Website Link Widget at the dashboard
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * Add a Website Link QR Code widget to the dashboard. * This function is hooked into the 'wp_dashboard_setup' action below. */ function sh_add_dashboard_qrcode_widget() { wp_add_dashboard_widget( 'qrcode_dashboard_widget', 'Website Link QR Code', array( $this, 'sh_qr_display_dashboard_qrcode_widget_callback' ) ); } /** * Create the function to output the contents of our Dashboard Widget. */ function sh_qr_display_dashboard_qrcode_widget_callback() { // Display QR code for website link echo "<img src='".$this->sh_get_qrcode(0,site_url())."' />"; } |
|
1 2 3 4 |
/** *Adding QR Code Website Link Widget at dashboard */ add_action( 'wp_dashboard_setup',array($this, 'sh_add_dashboard_qrcode_widget') ); |
3.Adding QR Code Post Link shortcode with arguments size and link
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * Get QR Code postlink shortcode data */ function sh_get_qrcode_postlink($atts) { global $post; //get size from short code argument size $size = (isset($atts['size'])) ? $atts['size'] : 0; //get postlink from short code argument postlink $postlink = (isset($atts['postlink'])) ? $atts['postlink'] : get_permalink($post->ID); // Display QR code for post permalink return "<img src='".$this->sh_get_qrcode($size,$postlink)."' />"; } |
|
1 2 3 4 |
/** *Adding QR Code Post Link short code with arguments size and link */ add_shortcode( 'qrlink', array( $this, 'sh_get_qrcode_postlink' ) ); |
|
1 |
[qrlink size=400 postlink="http://scripthere.com"] |
4.Adding QR Code for Post Content enclosed shortcode with arguments size
|
1 2 3 4 5 6 7 8 9 |
/** * get qr code content enclosed shortcode data */ function sh_get_qrcode_content($atts = [], $content = null){ //get size from short code argument size $size = (isset($atts['size'])) ? $atts['size'] : 0; // Display QR code for post permalink return "<img src='".$this->sh_get_qrcode($size,$content)."' />"; } |
|
1 2 3 4 |
/** *Adding QR Code for Post Content enclosed short code with arguments size */ add_shortcode( 'qrcontent', array( $this, 'sh_get_qrcode_content' ) ); |
|
1 |
[qrcontent] Welcome to scripthere.com [/qrcontent] |
5.Adding QR Code for contact via email shortcode with arguments size, to, sub and body
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * get qr code content email shortcode data */ function sh_get_qrcode_email($atts){ //get size from short code argument size $size = (isset($atts['size'])) ? $atts['size'] : 0; //to email address $to = (isset($atts['to'])) ? $atts['to'] : get_option( 'admin_email' ); //email subject $sub = (isset($atts['sub'])) ? $atts['sub'] : "Enquiry"; //email body $body = (isset($atts['body'])) ? $atts['body'] : "Type your message here."; //set email content $content = "MATMSG:TO:{$to};SUB:{$sub};BODY:{$body};"; // Display QR code for contact email shortcode data return "<img src='".$this->sh_get_qrcode($size,$content)."' />"; } |
|
1 2 3 4 |
/** *Adding QR Code for contact short code with arguments size,to,sub and body */ add_shortcode( 'qrcontact', array( $this, 'sh_get_qrcode_email' ) ); |
|
1 |
[qrcontact size=250 to=narendra@narendra.com sub=Enquiry body="Your message"] |
6.Adding QR Code for contact via SMS shortcode with arguments size, to and msg
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * get qr code content sms shortcode data */ function sh_get_qrcode_sms($atts){ //get size from short code argument size $size = (isset($atts['size'])) ? $atts['size'] : 0; //to mobile number default i set dummy admin phone number modify based on your need here $mobile = (isset($atts['to'])) ? $atts['to'] : "+91959012345"; //email body $msg = (isset($atts['msg'])) ? $atts['msg'] : "Type your txt message here."; //set sms content $content = "SMSTO:{$mobile}:{$msg}"; // Display QR code for sms shortcode data return "<img src='".$this->sh_get_qrcode($size,$content)."' />"; } |
|
1 2 3 4 |
/** * Adding QR Code for contact via SMS short code with argument size, to and MSG */ add_shortcode( 'qrmessage', array( $this, 'sh_get_qrcode_sms' ) ); |
|
1 |
[qrmessage size=250 to=9590123456 msg="Your message"] |
The next step is, open the functions.php of the currently active theme and drop this PHP code, or create a plugin and location. Here is a sample file called “script_quick_response_code.php” and you drop this PHP code and create a plugin header. You can download the full code here. I have created with this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php /** * @package Quick Response code * @version 1.0 */ /* Plugin Name: ScriptHere's Quick Response Code generator for WordPress Posts. Plugin URI: https://github.com/blogscripthere/script_quick_response_codes Description: Simple Quick Response Code generator for WordPress content posts and pages. Author: Narendra Padala Author URI: https://in.linkedin.com/in/narendrapadala Text Domain: shqrc Version: 1.0 Last Updated: 30/12/2017 */ |
Finally, to read the code. The App Store and the Google Play Store have a lot of apps to scan and read QR code. Download and install one of the apps on your smartphone. Open the application and scan and show the QR code. Hope in this article, it’s useful to add a QR code to the WordPress site. Leave the comments below and give us your opinion on the QR Code.
ScriptHere’s Free QR Code Generator. Create QR-Code online!
