In today’s digital age, it’s crucial for bloggers and website owners to be transparent about their sponsored and nofollow links. However, manually identifying and emphasizing these links can be a time-consuming process, especially if you have a large number of posts to go through. Luckily, there’s a solution that can make this task much easier – Gutenberg.
Gutenberg is a popular WordPress editor that offers a range of features to enhance your content creation experience. One such feature is the ability to highlight sponsored and nofollow links, allowing you to quickly locate and assess them. This can be particularly useful if you’re looking to determine if you have an excessive number of sponsored links or if you need to add a rel attribute to certain links.
To begin highlighting these links in Gutenberg, you’ll need to add some CSS to the WordPress editor. If you’re working with a theme, you can easily add custom CSS to the editor using a CSS file. Alternatively, if you’re not using a theme, you can insert inline CSS with a hook.
For those working with a theme, simply create a new style-editor.css file and add the necessary code. WordPress will automatically load this file in both the classic and block editors. On the other hand, if you’re not working with a theme, you can use the enqueue_block_editor_assets hook to add inline CSS. This will allow you to include the CSS directly within the editor.
Once you’ve added the CSS, you can easily highlight sponsored and nofollow links using the CSS tilde attribute selector. This selector targets links that have a rel attribute set to sponsored or nofollow. By applying a background color and text color to these links, you can make them stand out within your content.
It’s important to note that when working with the WordPress editor, it’s advisable to target the .editor-styles-wrapper classname. This will ensure that the CSS is applied correctly. If you’re using a block theme, this step may not be necessary as Gutenberg will load in an iFrame.
By following these steps and incorporating the CSS code into your editor, you’ll be able to easily identify and emphasize sponsored and nofollow links within your content. This is particularly beneficial for posts that contain affiliate links, as it allows you to quickly scan the post and locate these types of links.
If you’re interested in implementing this functionality on your website but don’t want to go through the process of adding the CSS yourself, there’s good news. The author of the article has created a plugin that contains the necessary code. This plugin can be downloaded and uploaded to your WordPress site, saving you time and effort.
It’s worth noting that the plugin is not available on the WordPress.org directory. The author cites the lengthy review process for plugins on this platform as the reason for this. However, the plugin is available on Github, allowing you to easily access and utilize it.
In conclusion, highlighting sponsored and nofollow links in Gutenberg can greatly improve the efficiency and transparency of your content creation process. By following the steps outlined in this article, you’ll be able to quickly locate and assess these types of links within your posts. Whether you choose to implement the CSS code manually or download the plugin provided, this feature is sure to be a valuable addition to your website.
