URL shortening is a technique in which a URL is made substantially shorter in length and still links to the required page. This is achieved by using a redirect on a domain name that is short, which links to the web page that has the longer URL.

URL缩短是一种使URL的长度大大缩短并且仍然链接到所需页面的技术。 这是通过在短域名上使用重定向来实现的&＃xff0c;该域名链接到具有较长URL的网页。

In this tutorial, I’ll show you how to create a URL shortening plugin for WordPress using Google’s URL Shortener API.

在本教程中&＃xff0c;我将向您展示如何使用Google的URL Shortener API为WordPress创建URL缩短插件。

缩短网址的原因 (Reasons for URL Shortening)

Before we start building a URL shortening plugin let’s see a few examples as to why we may need this plugin:

在开始构建URL缩短插件之前&＃xff0c;让我们看一些为什么我们可能需要此插件的示例&＃xff1a;

• On Twitter and some other messaging services there is a limit to number of characters a message can contain. So if you’re sending long URLs then it will occupy most of the message.
  在Twitter和其他一些消息服务上&＃xff0c;消息可以包含的字符数有限制。 因此&＃xff0c;如果您要发送长URL&＃xff0c;则它将占用大部分消息。
• Printed books or display signage will often use shortened URLs as they are easy to be read and type.
  印刷书籍或显示标牌通常会使用缩短的URL&＃xff0c;因为它们易于阅读和键入。

• QR codes have a character limit. Very long URLs don’t fit, therefore shortening of the URL is required.

  QR码有字符限制。 非常长的URL不适合&＃xff0c;因此需要缩短URL。

获取Google URL Shortener API密钥 (Acquiring a Google URL Shortener API Key)

To use the Google URL Shortener API you’ll need to acquire an API Key. This API key is used by Google to keep track of your application.

要使用Google URL Shortener API&＃xff0c;您需要获取一个API密钥。 Google使用此API密钥来跟踪您的应用程序。

Here are the steps to acquire your API key:

以下是获取API密钥的步骤&＃xff1a;

• Visit Google Developers Console.

  访问Google Developers Console 。

• Select an existing project or create a new one.
  选择一个现有项目或创建一个新项目。
• In the left sidebar, click and expand APIs & auth.
  在左侧边栏中&＃xff0c;单击并展开APIs&＃xff06;auth。
• Next, click APIs. In the list of APIs, make sure the status is ON for the Google URL Shortener API.
  接下来&＃xff0c;单击API。 在API列表中&＃xff0c;确保Google URL Shortener API的状态为“开”。
• In the sidebar on the left, select Credentials. Then generate a public access key if you haven’t already. This public access key is the API key.
  在左侧的边栏中&＃xff0c;选择“凭据”。 如果还没有&＃xff0c;请生成一个公共访问密钥。 此公共访问密钥是API密钥。

插件目录和文件 (Plugin Directory and Files)

Our plugin will contain one directory and one file. Here is the structure:

我们的插件将包含一个目录和一个文件。 结构如下&＃xff1a;

--url-shortener
-url-shortener.php

To make the plugin installable, we put this code in the url-shortener.php file:

为了使该插件可安装&＃xff0c;我们将以下代码放在url-shortener.php文件中&＃xff1a;

/*
Plugin Name: URL Shortener
Plugin URI: http://www.sitepoint.com
Description: Create&＃39;s a Shortened URL of every post.
Version: 1.0
Author: Narayan Prusty
*/

创建一个插件设置页面 (Create a Plugin Settings Page)

We need to create a settings page for our plugin where administrator’s can enter the URL Shortener API key. Here is the code to create a settings page using the WordPress Settings API:

我们需要为插件创建一个设置页面&＃xff0c;管理员可以在其中输入URL Shortener API密钥。 这是使用WordPress设置API创建设置页面的代码&＃xff1a;

function url_shortener_settings_page()
{
add_settings_section("section", "Enter Key Details", null, "url-shortener");
add_settings_field("url-shortener-input-field", "API Key", "url_shortener_input_field_display", "url-shortener", "section");
register_setting("section", "url-shortener-input-field");
}
function url_shortener_input_field_display()
{
?>
" />
}
add_action("admin_init", "url_shortener_settings_page");
function url_shortener_page()
{
?>


We are storing the API key as a WordPress option with the name url-shortener-input-field.

我们将API密钥作为WordPress选项存储为名称url-shortener-input-field 。

This is what the settings page should look like:

设置页面应如下所示&＃xff1a;

Google URL Shortener API概述 (An Overview of the Google URL Shortener API)

To shorten a long URL you need to send a POST request to the https://www.googleapis.com/urlshortener/v1/url URL with your API key and long URL.

要缩短长网址&＃xff0c;您需要使用API​​密钥和长网址将POST请求发送到https://www.googleapis.com/urlshortener/v1/url网址。

Here’s what a sample request looks like:

这是一个示例请求的样子&＃xff1a;

POST https://www.googleapis.com/urlshortener/v1/url
Content-Type: application/json
{"longUrl": "https://www.sitepoint.com/"}

Here is the sample response looks like:

这是示例响应&＃xff0c;如下所示&＃xff1a;

{
"kind": "urlshortener#url",
"id": "http://goo.gl/fqsT",
"longUrl": "https://www.sitepoint.com/"
}

Note: You cannot send more than 1 million requests using the same API key in a day.

注意&＃xff1a;每天使用同一API密钥发送的请求不能超过一百万。

在元框中显示缩短的URL (Displaying a Shortened URL in a Meta Box)

We want to display the shortened URL in a meta box in the post edit screen. For creating a meta box, we’ll use the Meta Box API and for the URL shortening we’ll use the WordPress HTTP API.

我们想在帖子编辑屏幕的一个元框中显示缩短的URL。 为了创建一个meta box&＃xff0c;我们将使用Meta Box API &＃xff0c;对于URL缩短&＃xff0c;我们将使用WordPress HTTP API 。

Here’s the code to display our shortened URL in a meta box:

这是在元框中显示缩短的URL的代码&＃xff1a;

function url_shortener_meta_box_markup($object)
{
$key &＃61; get_permalink($object->ID);
if(get_option(&＃39;url-shortener-input-field&＃39;, &＃39;&＃39;) !&＃61; "")
{
if(get_option($key, "") !&＃61; "")
{
echo get_option($key, "");
return;
}
$url &＃61; &＃39;https://www.googleapis.com/urlshortener/v1/url&＃39;;
$result &＃61; wp_remote_post(
add_query_arg(
&＃39;key&＃39;,
get_option(&＃39;url-shortener-input-field&＃39;),
&＃39;https://www.googleapis.com/urlshortener/v1/url&＃39;
),
array(
&＃39;body&＃39; &＃61;> json_encode(array(&＃39;longUrl&＃39; &＃61;> esc_url_raw($key))),
&＃39;headers&＃39; &＃61;> array( &＃39;Content-Type&＃39; &＃61;> &＃39;application/json&＃39;)
)
);
if(is_wp_error($result)){echo "Error"; return;}
$result &＃61; json_decode($result[&＃39;body&＃39;]);
$shortlink &＃61; $result->id;
update_option($key, $shortlink);
echo $shortlink;
}
}
function url_shortener_meta_box()
{
add_meta_box("url-shortener-meta-box", "Shorten URL", "url_shortener_meta_box_markup", "post", "side", "default", null);
}
add_action("add_meta_boxes", "url_shortener_meta_box");

Here’s how this code works:

此代码的工作方式如下&＃xff1a;

• We created a meta box using the add_meta_box function.

  我们使用add_meta_box函数创建了一个meta框。

• We’re retrieving the long URL of the post using the get_permalink() function.

  我们使用get_permalink()函数检索帖子的长URL。

• Then, we’re checking if we already have a short URL of this long URL in the database as a WordPress option. If not, then we’re retrieving it using the HTTP API and storing it as a WordPress option. Otherwise we use the existing short URL.
  然后&＃xff0c;我们正在检查数据库中是否已经有这个长URL的短URL作为WordPress选项。 如果不是&＃xff0c;那么我们将使用HTTP API检索它并将其存储为WordPress选项。 否则&＃xff0c;我们将使用现有的简短URL。
• This plugin plays nicely with the Google URL shortener web service as it doesn’t request a new URL every time, instead it stores it once it’s retrieved.
  该插件可与Google URL Shortener网络服务很好地配合使用&＃xff0c;因为它不会每次都请求新的URL&＃xff0c;而是在检索到它后立即将其存储。

This is what the meta box looks like in post edit screen:

这是元框在帖子编辑屏幕中的样子&＃xff1a;

在前端显示短URL (Displaying the Short URL in the Front End)

We also want to display the shortened URL below every post. Here’s the code to do just that:

我们还希望在每个帖子下方显示缩短的URL。 这是执行此操作的代码&＃xff1a;

function url_shortener_content_filter($content)
{
if($GLOBALS[&＃39;post&＃39;]->post_type !&＃61; "post")
return;
$key &＃61; get_permalink($GLOBALS[&＃39;post&＃39;]->ID);
if(get_option(&＃39;url-shortener-input-field&＃39;, &＃39;&＃39;) !&＃61; "")
{
if(get_option($key, "") !&＃61; "")
{
$content &＃61; $content . "

Shortern URL: " . get_option($key, "") . "

This is how this code works:

这段代码是这样工作的&＃xff1a;

• We are first checking to make sure WordPress is processing a post. If it’s a page or custom post type, then we aren’t displaying the short URL. However, if you want to display it in every page then remove the first two lines from the function code.
  我们首先检查以确保WordPress正在处理帖子。 如果是页面或自定义帖子类型&＃xff0c;则我们不会显示简短的URL。 但是&＃xff0c;如果要在每个页面中显示它&＃xff0c;则从功能代码中删除前两行。
• Then we’re doing everything the same as we did while displaying the short URL in the meta box. The only difference is that instead of echoing it, we are concatenating it to the post content.
  然后&＃xff0c;我们将执行与在meta框中显示短URL时相同的所有操作。 唯一的区别是&＃xff0c;我们没有将其回显&＃xff0c;而是将其连接到帖子内容。

Here is how it looks on front end:

这是前端的外观&＃xff1a;

Now we’re done with building a awesome URL shortener plugin for WordPress!

现在&＃xff0c;我们已经为WordPress构建了一个很棒的URL缩短器插件&＃xff01;

WordPress.org插件目录中的流行URL Shortener插件 (Popular URL Shortener Plugins in the WordPress.org Plugin Directory)

If you’d like to check out existing plugins, two of the most popular URL Shortener plugins in the WordPress.org Plugin Directory are URL Shortener and WP URL Shorten.

如果您想查看现有的插件&＃xff0c;WordPress.org插件目录中最流行的两个URL Shortener插件是URL Shortener和WP URL Shorten 。

WP URL Shorten uses ref.li to shorten URLs. Ref.li provides real time stats and other traffic information of people visiting your site via their shortened URL.

WP URL Shorten使用ref.li来缩短URL。 Ref.li通过缩短的URL提供访问您网站的人员的实时统计信息和其他流量信息。

URL Shortener plugin lets you choose between Bit.ly, Su.pr, YOURLS, Goo.gl and many other services. This plugin can also generate QR Codes.

短网址插件可以让你Bit.ly&＃xff0c;Su.pr&＃xff0c;YOURLS&＃xff0c;Goo.gl和许多其他服务之间进行选择。 该插件还可以生成QR码。

结论 (Conclusion)

In this tutorial, I’ve shown you how to easily build your own URL shortening plugin. You can now go ahead and expand on this to add more features such as QR code support and use other URL shortening services. Please share your experience with your own plugins below.

在本教程中&＃xff0c;我向您展示了如何轻松构建自己的URL缩短插件。 现在&＃xff0c;您可以继续进行扩展&＃xff0c;以添加更多功能&＃xff0c;例如QR码支持和使用其他URL缩短服务。 请在下面与您自己的插件分享您的经验。

翻译自: https://www.sitepoint.com/create-a-url-shortener-plugin-for-wordpress/