adblock插件

tech2022-12-28 139

adblock插件

Editor’s note: Ad-blocking (and online advertising in general) is a controversial subject. Some dislike ads altogether, and block them on principle, others say this robs publishers of income. This tutorial is one developer’s attempt at a compromise. What do you think? Let us know in the comments below.

编者注：广告屏蔽(通常是在线广告)是一个有争议的主题。有些人完全不喜欢广告，并原则上将其屏蔽，另一些人则认为这剥夺了出版商的收入。本教程是一个开发人员的折衷尝试。你怎么看？在下面的评论中让我们知道。

In this tutorial, we will create a WordPress plugin that can disable the website for users using AdBlock or display alternative ads to AdBlock users from the same domain as the website.

在本教程中，我们将创建一个WordPress插件，该插件可以为使用AdBlock的用户禁用网站，或向与该网站位于同一域的AdBlock用户显示替代广告。

This plugin can be useful if your website is completely dependent on ads for generating revenue and where users consume a high amount of resources. For example, a video sharing site may want to ban a site from playing videos or display alternative ads for AdBlock installed users. One such example is TED.com, as shown above. You can see TED.com requests you to unblock ads for their site.

如果您的网站完全依赖广告来产生收入并且用户消耗大量资源，则此插件很有用。例如，视频共享网站可能希望禁止该网站播放视频或为安装了AdBlock的用户显示替代广告。如上所示，TED.com就是这样一个例子。您会看到TED.com要求您取消屏蔽其网站的广告。

AdBlock如何工作？ (How Does AdBlock Work?)

AdBlock maintains a list of various advertising network domain names and a list of advertising specific keywords.

AdBlock维护各种广告网络域名的列表以及广告特定关键字的列表。

AdBlock works by blocking image, iframe, script and Flash HTTP requests that match known advertiser domain or advertiser specific keywords that are on their list. After the requests are blocked, it also changes the CSS properties of the blocked HTML elements to hide them.

AdBlock的工作原理是阻止图像，iframe，脚本和Flash HTTP请求，这些请求与列表中已知的广告客户域或广告客户特定的关键字匹配。阻止请求后，它还会更改被阻止HTML元素CSS属性以将其隐藏。

AdBlock allows you to expand on what can be blocked by adding filters.

AdBlock允许您扩展可通过添加过滤器阻止的内容。

Alexis Ulrich has written about ad blocking technology if you’re interested in reading more on the topic.

如果您有兴趣阅读有关该主题的更多信息，Alexis Ulrich 撰写了有关广告拦截技术的文章。

设置插件目录和文件 (Setting up Plugin Directory and Files)

Here’s the directory structure of the plugin we’re going to be creating:

这是我们将要创建的插件的目录结构：

--alternative -alternative.php -custom.css -index.js

alternative is the plugin directory. If you want to change the name, that’s fine. Just make sure you don’t call it anything that the keywords specific blocking would trigger, otherwise enqueuing of index.js will fail.

alternative是插件目录。如果您想更改名称，那很好。只要确保您没有将其称为特定阻止关键字会触发的任何东西，否则index.js队将失败。

创建管理面板菜单项 (Creating a Admin Panel Menu Item)

First, we need to add a Anti AdBlock settings page to WordPress admin panel. Before we create a settings page, we need to create a sub menu item for the ‘settings’ parent menu item.

首先，我们需要在WordPress管理面板中添加一个Anti AdBlock设置页面。在创建设置页面之前，我们需要为“设置”父菜单项创建一个子菜单项。

Here’s the code we’ll use to create a sub menu item. Place it in the alternative.php file.

这是我们用来创建子菜单项的代码。将其放置在alternative.php文件中。

function add_anti_adblock_menu_item() { add_submenu_page("options-general.php", "Anti Adblock", "Anti Adblock", "manage_options", "anti-adblock", "anti_adblock_page"); } function anti_adblock_page() { } add_action("admin_menu", "add_anti_adblock_menu_item");

This code creates a menu item and attaches a settings page to it.

此代码创建一个菜单项，并将一个设置页面附加到该菜单项。

创建设置页面 (Creating a Settings Page)

Next, we need to use the WordPress Settings API to populate the Anti Adblock Settings page with desired options.

接下来，我们需要使用WordPress设置API使用所需的选项填充“反广告阻止设置”页面。

Here’s the code for displaying various options on the settings page using the WordPress Settings API. Place this in the alternative.php file.

这是使用WordPress设置API在设置页面上显示各种选项的代码。将此放置在alternative.php文件中。

Here’s what our settings page should look like:

这是我们的设置页面的外观：

This is where we can choose whether we want to display alternative ads or disable access to the website completely for users with AdBlock installed.

在这里，我们可以选择是否要显示替代广告或完全禁止安装了AdBlock的用户访问该网站。

I am assuming that your website has two advertising placements. If you have more than this, add more fields to the settings page.

我假设您的网站有两个广告刊登位置。如果您还不止于此，请在设置页面中添加更多字段。

For alternative ads, you first need to provide the selector for the HTML element which holds the ads and then the ad code. Make sure that the ad code doesn’t have any advertising specific keywords or that their URL isn’t pointing to another advertising network. Otherwise they too, will get blocked. You can find selector of your ads container by inspecting the elements using your browser development tools. This will provide you with the class name or id of the HTML element.

对于替代广告，您首先需要提供用于保存广告HTML元素的选择器，然后是广告代码。确保广告代码中没有任何广告专用关键字，或者其网址未指向其他广告网络。否则它们也会被阻止。您可以使用浏览器开发工具检查元素，从而找到广告容器的选择器。这将为您提供HTML元素的类名或ID。

Finally, we have an input box to add custom CSS to style the alternative ads. This CSS is flushed into a custom.css file which will be embedded on the front end.

最后，我们有一个输入框，用于添加自定义CSS来设置替代广告的样式。该CSS被刷新到一个custom.css文件中，该文件将嵌入在前端。

将数据从WordPress传递到JavaScript (Passing Data from WordPress to JavaScript)

We will be detecting AdBlock and then blocking or displaying alternative ads using JavaScript. To do this, we need to pass the data from the plugin settings to JavaScript.

我们将检测AdBlock，然后使用JavaScript阻止或展示替代广告。为此，我们需要将数据从插件设置传递到JavaScript。

There are various ways to pass data from WordPress to JavaScript, my preferred way is to pass it using HTML5 Data Attributes.

有多种方法可以将数据从WordPress传递到JavaScript，我的首选方法是使用HTML5数据属性传递数据。

Place the following in the alternative.php file.

将以下内容放在alternative.php文件中。

使用JavaScript检测AdBlock (Detecting AdBlock using JavaScript)

There is no direct way to detect AdBlock using JavaScript. We have to create a sandbox environment using JavaScript and check if the testing advertisement banner is visible to the user or not.

没有直接的方法可以使用JavaScript检测AdBlock。我们必须使用JavaScript创建沙箱环境，并检查测试广告横幅是否对用户可见。

Place the following JavaScript in the index.js file, which is responsible for detecting the presence of AdBlock.

将以下JavaScript放在index.js文件中，该文件负责检测AdBlock的存在。

使用JavaScript禁用网站或显示替代广告 (Disabling the Website or Displaying Alternative Ads Using JavaScript)

Once we’ve detected if AdBlock is blocking ads on our page, we need to act, based on our plugin settings.

一旦检测到AdBlock是否在网页上屏蔽了广告，就需要根据插件设置采取措施。

Here’s the JavaScript code which disables the website or displays alternative ads based on our preferences.

这是JavaScript代码，可根据我们的偏好禁用网站或显示替代广告。

Add the following code to the index.js file.

将以下代码添加到index.js文件。

我们完整的插件源代码 (Our Complete Plugin Source Code)

To recap, our plugin needs the following files:

回顾一下，我们的插件需要以下文件：

--alternative -alternative.php -custom.css -index.js

Below is the complete source code for our AdBlock plugin.

以下是我们的AdBlock插件的完整源代码。

Alternative.php (alternative.php)

<?php /* Plugin Name: Anti AdBlock Plugin URI: https://www.sitepoint.com/ Description: This plugin lets you display alternative ads and also lets you disable website. Version: 1.0 Author: Narayan Prusty Author URI: http://qnimate.com License: GPL2 */ function add_anti_adblock_menu_item() { add_submenu_page("options-general.php", "Anti Adblock", "Anti Adblock", "manage_options", "anti-adblock", "anti_adblock_page"); } function anti_adblock_page() { ?> <div class="wrap"> <h1>Anti Adblock</h1> <form method="post" action="options.php"> <?php settings_fields("anti_adblock_config_section"); do_settings_sections("anti-adblock"); submit_button(); ?> </form> </div> <?php } add_action("admin_menu", "add_anti_adblock_menu_item"); function anti_adblock_settings() { add_settings_section("anti_adblock_config_section", "", null, "anti-adblock"); add_settings_field("disable_website", "Do you want to disable website?", "disable_website_checkbox", "anti-adblock", "anti_adblock_config_section"); add_settings_field("disable_website_url", "Image to display when website is disabled", "disable_website_image_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code", "Do you want to display alternative ads code", "alternative_ads_checkbox", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_selector_1", "Alternaive Ad Code 1 Selector", "alternative_ads_selector_1_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code_1", "Alternaive Ad Code 1", "alternative_ads_code_1_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_selector_2", "Alternaive Ad Code 2 Selector", "alternative_ads_selector_2_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code_2", "Alternaive Ad Code 2", "alternative_ads_code_2_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("custom_css", "Custom CSS", "custom_css_input_field", "anti-adblock", "anti_adblock_config_section"); register_setting("anti_adblock_config_section", "disable_website"); register_setting("anti_adblock_config_section", "disable_website_url"); register_setting("anti_adblock_config_section", "alternative_ads_code"); register_setting("anti_adblock_config_section", "alternative_ads_selector_1"); register_setting("anti_adblock_config_section", "alternative_ads_code_1"); register_setting("anti_adblock_config_section", "alternative_ads_selector_2"); register_setting("anti_adblock_config_section", "alternative_ads_code_2"); register_setting("anti_adblock_config_section", "custom_css"); } function disable_website_checkbox() { ?> <input type="checkbox" name="disable_website" value="1" <?php checked(1, get_option('disable_website'), true); ?> /> Check for Yes <?php } function disable_website_image_input_field() { ?> <input name="disable_website_url" type="txt" value="<?php echo get_option('disable_website_url'); ?>" /> <?php } function alternative_ads_checkbox() { ?> <input type="checkbox" name="alternative_ads_code" value="1" <?php checked(1, get_option('alternative_ads_code'), true); ?> /> Check for Yes <?php } function alternative_ads_selector_1_input_field() { ?> <input name="alternative_ads_selector_1" type="txt" value="<?php echo get_option('alternative_ads_selector_1'); ?>" /> <?php } function alternative_ads_code_1_input_field() { ?> <textarea name="alternative_ads_code_1"><?php echo get_option("alternative_ads_code_1"); ?></textarea> <?php } function alternative_ads_selector_2_input_field() { ?> <input name="alternative_ads_selector_2" type="txt" value="<?php echo get_option('alternative_ads_selector_2'); ?>" /> <?php } function alternative_ads_code_2_input_field() { ?> <textarea name="alternative_ads_code_2"><?php echo get_option("alternative_ads_code_2"); ?></textarea> <?php } function custom_css_input_field() { $css = ".anti-adblock-textarea{display: none}" . get_option("custom_css"); file_put_contents(plugin_dir_path(__FILE__) . "custom.css", $css); ?> <textarea name="custom_css"><?php echo get_option("custom_css"); ?></textarea> <?php } add_action("admin_init", "anti_adblock_settings"); function anti_adblock_footer_code() { if(get_option("disable_website") == 1) { ?> <span id="anti-adblock-disable-website" data-value="true"></span> <span id="anti-adblock-disable-website-url" data-value="<?php echo get_option('disable_website_url'); ?>"></span> <?php } else { ?> <span id="anti-adblock-disable-website" data-value="false"></span> <?php } if(get_option("alternative_ads_code")) { //change this if your are adding more fields. $count = 2; ?> <span id="anti-adblock-alternative-ads" data-value="true" data-count="<?php echo $count; ?>"></span> <?php for($iii = 1; $iii <= $count; $iii++) { ?> <textarea class="anti-adblock-textarea" id="alternative_ads_selector_<?php echo $iii; ?>"><?php echo get_option("alternative_ads_selector_" . $iii); ?></textarea> <textarea class="anti-adblock-textarea" id="alternative_ads_code_<?php echo $iii; ?>"><?php echo esc_html(get_option("alternative_ads_code_" . $iii)); ?></textarea> <?php } } else { ?> <span id="anti-adblock-alternative-ads" data-value="false"></span> <?php } } function anti_adblock_style_script() { wp_register_style("anti-adblock-custom", plugin_dir_url(__FILE__) . "custom.css"); wp_enqueue_style("anti-adblock-custom"); wp_enqueue_script('anti-adblock-script', plugin_dir_url(__FILE__) . "index.js", array("jquery"), '1.0.0', true); } add_action("wp_footer","anti_adblock_footer_code"); add_action("wp_enqueue_scripts", "anti_adblock_style_script");

index.js (index.js)

屏幕截图 (Screenshots)

This is how it looks when you disable the whole website for AdBlock users.

这是您对AdBlock用户禁用整个网站时的外观。

This is how it looks when you want to display alternative ads.

这是您要展示替代广告时的外观。

告诫 (A Word of Caution)

As mentioned previously, when providing images when the website is disabled, make sure that the image URL doesn’t contain any ad specific keywords. Otherwise they will also get blocked.

如前所述，在禁用网站时提供图像时，请确保图像URL不包含任何广告特定的关键字。否则，它们也将被阻止。

Similarly, make sure alternate ads don’t point to any other advertising network or don’t point to URLs with ad specific keywords. Otherwise the alternate ads will also get blocked too. In this article, by alternate ads I’m referring to ads serverd from the same domain.

同样，请确保备用广告不要指向任何其他广告网络，也不要指向带有广告特定关键字的网址。否则，备用广告也将被屏蔽。在本文中，替代广告是指来自同一域的服务器广告。

最后的想法 (Final Thoughts)

From my own analytics data I can say that 25% of website visitors use AdBlock. If you’re serving ads from ‘pay per impression’ networks then this plugin could increase your website revenue by 25% right away.

从我自己的分析数据中，我可以说25％的网站访问者使用AdBlock。如果您是从“按展示次数付费”网络投放广告，则此插件可以立即将您的网站收入提高25％。

If you don’t want to block your site, then you can use the alternate ads feature to request the user to whitelist your website.

如果您不想阻止您的网站，则可以使用备用广告功能来请求用户将您的网站列入白名单。

翻译自: https://www.sitepoint.com/creating-an-anti-adblock-plugin-for-wordpress/

adblock插件

最新回复(0)