Not limited to WordPress, in blog content, you can write sentences in any length, so I think it is rare that the height (length) of the text and the sidebar match.

It’s unavoidable, but if there is less text than the sidebar, there will be a large space under the body, and if there is more body than the sidebar, there will be a large space under the sidebar, which is a bit ugly.

Also, I think that there are many cases of the latter except for sites that really write short diaries.

This time, on a site created with WordPress, the sidebar widget inserted at the bottom will be displayed until the end of the text so that the sidebar part will not be blank (this is called follow), probably I will introduce the easiest method.

Since it can be realized only with CSS (design code) without using scripts or special plug-ins to make it move, processing can be minimized, so it does not affect the display speed of the page. , It is a perfect method for those who want to take measures while paying attention to the display speed.

本記事を参考に追従ウィジェットを実装する条件

The design code (CSS) introduced in this article is based on the following layout. If the specifications are different, it will not work, so you need to change or adjust it according to your theme.

The above layout is expressed in characters as follows.

• In the whole page, “header”, “container” and “footer” are lined up in the body from the top.
• “Contents” and “sidebar” are side by side in “container”
• Inside the “sidebar”, there is a place where a widget called “sidebar-inner” is placed.
• Widgets have a common “sidebar-wrapper”

Design code to fix the widget at the bottom

Compare the contents of the following design code (CSS) with the above part and change it according to the theme you are using.

/***** Follow-up display of the bottom widget *****/
@media (min-width: 768px) {
/* Display the location including the text and sidebar side by side */
.container {
  display: flex;
	}

/* Inside the sidebar (where widgets line up) */
.sidebar-inner {
  height: 100%;
	}

/* Fixed display of the last widget inside the sidebar */
.sidebar-inner .sidebar-wrapper:last-child {
	position: -webkit-sticky;
	position: sticky;
	top: 40px; /*Adjust position */
  }
}

If the code is correct but the follow-up is not displayed, clear the cache (“Ctrl” + “F5” in most browsers).

Explanation of design code

It’s surprisingly simple to implement, but it really makes sense.

First, set the minimum screen width to be displayed with the sidebar in the media query on the first line (varies depending on the theme)

In the “Display the location including the text and sidebar side by side” part, specify the content and sidebar part as flexbox (multiple boxes are arranged side by side).

Set the height inside the sidebar to 100% in “Inside the sidebar (where the widgets are lined up)” (that is, make sure that the inside of the sidebar is the reference in the flexbox)

The widget set at the bottom is fixedly displayed in “Fixed display of the last widget in the sidebar” (the height from the top of the screen that is commented as “Adjust position” according to the environment You may need to change it).

There are cases where it is not displayed properly (it does not work)

With the method introduced so far, it is really easy to set the tracking widget in WordPress, but I will add two points that occurred when implementing it in my environment.

The quickest way to determine what is causing the problem is to remove the widget. If you can determine the problematic widget, do you decide whether to use it and fix the widget by the method introduced in this article? It’s a good idea to decide if you want to implement it using a plugin.

On this page, as of June 20, 2021, the sidebar is fixedly displayed by the method introduced this time.

If your site does not work, we recommend using the following plugins.

“Q2W3 Fixed Widget for WordPress” is an excellent plugin that uses a script to calculate the exact page height and display the tracking widget.

The operation tends to be heavier than the case of CSS only introduced in this article, but although there are inconveniences such as those introduced in the future, if the content is deemed necessary for the site, it will be lighter. It’s better to use this plugin for accuracy than for accuracy.

When content with unspecified height or number is inserted later

When Google Adsense auto ads are inserted into the sidebar, the tracking widget may stick out at the bottom of the page (extend below the footer).

The probable cause is that the Adsense script is being loaded with a delay (not the addition of async or defer attributes). By taking a delay measure, it occurs because the advertisement is inserted suddenly after the page is displayed (after the height of the entire page is confirmed). This must be the cause, as the amount of widget display overhang is the same as the height of the auto-ads that will be inserted later.

By the way, the method of lazy loading is introduced in the following article.

Since you do not know when and how many automatic ads will be added on which page, you can not reserve the height in advance using “min-height”, and the sidebar part in the setting of automatic advertisement of Adsense There is no function to control the automatic advertisement of, so if you use this method and add the follow widget function by the method of this article, add the following CSS so that the automatic advertisement will not be displayed in the sidebar. There is no choice but to do it.

#sidebar .google-auto-placed {
    display: none;
}

The #sidebar part should match your theme

However, with the above code, all the automatic advertisements output to the sidebar will be hidden, so the advertisements that are automatically inserted into the “Related Articles” and “New Articles” list will also be hidden. It is better to verify the presence or absence of.

This bug is not limited to Adsense automatic ads, as it will occur in all cases where you do not know the height or number of inserts after the page is displayed.

When there is content whose height is not fixed

If you insert Adsense responsive ads, insert external parts, etc., problems may occur when embedding the Twitter timeline etc.

For those that have a fixed height to embed (external parts and embedding in the above), you can solve the problem by pre-booking the height using the “min-height” attribute in CSS.

The problem is still the content “automatically”, because the responsive unit of Google Adsense changes the advertisement (height changes) according to the situation at that time, so it is not possible to judge the height of the sidebar with respect to the height of the page body. , The phenomenon that the tracking itself cannot be performed occurs.

As an alternative, you can solve it by inserting an ad that specifies the width and height instead of the responsive unit, but you need to devise it because the ad of a good size will not be displayed when displaying on mobile.