當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

adblock插件_为WordPress创建一个反AdBlock插件

發(fā)布時(shí)間：2023/12/10 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了 adblock插件_为WordPress创建一个反AdBlock插件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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.

編者注：廣告屏蔽(通常是在線廣告)是一個(gè)有爭議的主題。有些人完全不喜歡廣告，并原則上將其屏蔽，另一些人則認(rèn)為這剝奪了出版商的收入。本教程是一個(gè)開發(fā)人員的折衷嘗試。你怎么看？在下面的評(píng)論中讓我們知道。

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.

在本教程中，我們將創(chuàng)建一個(gè)WordPress插件，該插件可以為使用AdBlock的用戶禁用網(wǎng)站，或向與該網(wǎng)站位于同一域的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.

如果您的網(wǎng)站完全依賴廣告來產(chǎn)生收入并且用戶消耗大量資源，則此插件很有用。例如，視頻共享網(wǎng)站可能希望禁止該網(wǎng)站播放視頻或?yàn)榘惭b了AdBlock的用戶顯示替代廣告。如上所示，TED.com就是這樣一個(gè)例子。您會(huì)看到TED.com要求您取消屏蔽其網(wǎng)站的廣告。

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

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

AdBlock維護(hù)各種廣告網(wǎng)絡(luò)域名的列表以及廣告特定關(guān)鍵字的列表。

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請(qǐng)求，這些請(qǐng)求與列表中已知的廣告客戶域或廣告客戶特定的關(guān)鍵字匹配。阻止請(qǐng)求后，它還會(huì)更改被阻止HTML元素CSS屬性以將其隱藏。

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

AdBlock允許您擴(kuò)展可通過添加過濾器阻止的內(nèi)容。

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

如果您有興趣閱讀有關(guān)該主題的更多信息，Alexis Ulrich 撰寫了有關(guān)廣告攔截技術(shù)的文章。

設(shè)置插件目錄和文件 (Setting up Plugin Directory and Files)

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

這是我們將要?jiǎng)?chuàng)建的插件的目錄結(jié)構(gòu)：

--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是插件目錄。如果您想更改名稱，那很好。只要確保您沒有將其稱為特定阻止關(guān)鍵字會(huì)觸發(fā)的任何東西，否則index.js隊(duì)將失敗。

創(chuàng)建管理面板菜單項(xiàng) (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管理面板中添加一個(gè)Anti AdBlock設(shè)置頁面。在創(chuàng)建設(shè)置頁面之前，我們需要為“設(shè)置”父菜單項(xiàng)創(chuàng)建一個(gè)子菜單項(xiàng)。

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

這是我們用來創(chuàng)建子菜單項(xiàng)的代碼。將其放置在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.

此代碼創(chuàng)建一個(gè)菜單項(xiàng)，并將一個(gè)設(shè)置頁面附加到該菜單項(xiàng)。

創(chuàng)建設(shè)置頁面 (Creating a Settings Page)

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

接下來，我們需要使用WordPress設(shè)置API使用所需的選項(xiàng)填充“反廣告阻止設(shè)置”頁面。

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設(shè)置API在設(shè)置頁面上顯示各種選項(xiàng)的代碼。將此放置在alternative.php文件中。

Here’s what our settings page should look like:

這是我們的設(shè)置頁面的外觀：

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的用戶訪問該網(wǎng)站。

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

我假設(shè)您的網(wǎng)站有兩個(gè)廣告刊登位置。如果您還不止于此，請(qǐng)?jiān)谠O(shè)置頁面中添加更多字段。

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.

對(duì)于替代廣告，您首先需要提供用于保存廣告HTML元素的選擇器，然后是廣告代碼。確保廣告代碼中沒有任何廣告專用關(guān)鍵字，或者其網(wǎng)址未指向其他廣告網(wǎng)絡(luò)。否則它們也會(huì)被阻止。您可以使用瀏覽器開發(fā)工具檢查元素，從而找到廣告容器的選擇器。這將為您提供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.

最后，我們有一個(gè)輸入框，用于添加自定義CSS來設(shè)置替代廣告的樣式。該CSS被刷新到一個(gè)custom.css文件中，該文件將嵌入在前端。

將數(shù)據(jù)從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阻止或展示替代廣告。為此，我們需要將數(shù)據(jù)從插件設(shè)置傳遞到JavaScript。

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

有多種方法可以將數(shù)據(jù)從WordPress傳遞到JavaScript，我的首選方法是使用HTML5數(shù)據(jù)屬性傳遞數(shù)據(jù)。

Place the following in the alternative.php file.

將以下內(nèi)容放在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創(chuàng)建沙箱環(huán)境，并檢查測試廣告橫幅是否對(duì)用戶可見。

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

將以下JavaScript放在index.js文件中，該文件負(fù)責(zé)檢測AdBlock的存在。

使用JavaScript禁用網(wǎng)站或顯示替代廣告 (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是否在網(wǎng)頁上屏蔽了廣告，就需要根據(jù)插件設(shè)置采取措施。

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

這是JavaScript代碼，可根據(jù)我們的偏好禁用網(wǎng)站或顯示替代廣告。

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 AdBlockPlugin URI: https://www.sitepoint.com/Description: This plugin lets you display alternative ads and also lets you disable website.Version: 1.0Author: Narayan PrustyAuthor URI: http://qnimate.comLicense: 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"><?phpsettings_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><?phpfor($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.

這是您對(duì)AdBlock用戶禁用整個(gè)網(wǎng)站時(shí)的外觀。

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

這是您要展示替代廣告時(shí)的外觀。

告誡 (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.

如前所述，在禁用網(wǎng)站時(shí)提供圖像時(shí)，請(qǐng)確保圖像URL不包含任何廣告特定的關(guān)鍵字。否則，它們也將被阻止。

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.

同樣，請(qǐng)確保備用廣告不要指向任何其他廣告網(wǎng)絡(luò)，也不要指向帶有廣告特定關(guān)鍵字的網(wǎng)址。否則，備用廣告也將被屏蔽。在本文中，替代廣告是指來自同一域的服務(wù)器廣告。

最后的想法 (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.

從我自己的分析數(shù)據(jù)中，我可以說25％的網(wǎng)站訪問者使用AdBlock。如果您是從“按展示次數(shù)付費(fèi)”網(wǎng)絡(luò)投放廣告，則此插件可以立即將您的網(wǎng)站收入提高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.

如果您不想阻止您的網(wǎng)站，則可以使用備用廣告功能來請(qǐng)求用戶將您的網(wǎng)站列入白名單。

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