Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man tonar in widgeten Last Sidebar i WordPress med hjälp av jQuery

Senast frågade en av våra användare oss om hur man addar en fade in effekt för den sista widgeten i sidebaren. Denna populära jQuery-effekt används på många välkända websites och bloggar. När användaren rullar ner på sidan tonas den sista widgeten i sidebaren in och blir synlig. Animationen gör widgeten iögonfallande och notice vilket dramatiskt ökar click through rate. I den här artikeln visar vi you hur man tonar in den sista widgeten i sidebar i WordPress med hjälp av jQuery.

Under är en demo av hur det skulle gilla att se ut:

Fade in last sidebar widget in WordPress

I denna tutorial kommer du att ändra dina theme-filer. Vi rekommenderar att du gör en backup av ditt theme innan du går vidare.

Step-by-Step 1: Lägga till JavaScript för Fadein-effekt

Det första du behöver add to är jQuery-koden till ditt WordPress theme som en separat JavaScript-fil. Börja med att öppna en tom fil i en textredigerare som gillar Notepad. Spara sedan denna tomma fil som wpb_fadein_widget.js på ditt skrivbord och klistra in följande kod i den.

jQuery(document).ready(function($) {
/**
* Konfigurera
* Containern för din sidebar, t.ex. notis, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Kontrollera om sidebaren finns
if ($(sidebarElement).length > 0) {

// Hämta det sista widgetet i sidebaren och dess position på vyn

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).förskjutning().högst upp -100;
	
// Dölj den sista widgeten
$(lastWidget).dölj();
	
// Kontrollera om användarens rulla har nått högst upp i den sista widgeten och visa den
$(document).scroll(function() {

// Om widgeten har displayed, behöver vi inte fortsätta att kontrollera.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

Den viktigaste raden i den här koden är var sidebarElement = $('div#secondary');.

Detta är ID:n för div:en som innehåller din sidebar. Eftersom varje theme kan använda olika sidebar container divs, måste you ta reda på container ID:n som your theme använder för sidebar.

Du kan ta reda på detta genom att använda inspect element tool i Google Chrome. Högerklicka helt enkelt på din sidebar i Google Chrome och välj sedan Inspect Element.

Finding sidebar container id in source code

I källkoden kommer du att kunna se din sidebar container div. Till exempel använder standardtemat Twenty Twelve secondary, och Twenty Thirteen använder teritary som ID:n för sidebarens container. You need to replace secondary with the ID:n för din sidebar container div.

Därefter måste du använda en FTP-klient för att uploada den här filen till mappen js i din WordPress theme directory. Om din theme directory inte har en js folder, då måste du skapa den genom att högerklicka och välja ”Create New Directory” i din FTP-klient.

Step 2: Lägga in ditt JavaScript i kö i WordPress Theme

Nu när ditt jQuery-skript är klart är det dags att add to det i ditt theme. Vi kommer att använda den korrekta metoden för att lägga till JavaScript i ditt tema, så klistra bara in följande kod i ditt temas functions.php-fil.

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

Det var allt, nu kan du add to en widget i din sidebar som du vill ska visas med fadein-effekten och sedan besöka din website för att se den i action.

Step 3: Göra den sista widgeten sticky efter fade in-effekten

En ofta önskad funktion med fade in-effekten är att få den sista sidebar-widgeten att rulla när användaren rullar. Detta anropas flytande widget eller sticky widget.

Om du tittar på jQuery-koden ovan kommer du att notera att vi adderade en wpbstickywidget CSS-klass till widgeten efter fade in-effekten. Du kan använda den här CSS-klassen för att göra din sista widget sticky efter att den har tonat in. Allt du behöver göra är att klistra in denna CSS i ditt temas stylesheet.

.wpbstickywidget { 
position:fixed;
top:0px; 
}

Känn dig gratis att ändra CSS för att möta dina behov. Du kan ändra bakgrundsfärg eller font för att göra widgeten ännu mer framträdande. Om du vill kan du även add to en smooth scroll to top-effekt bredvid din sista widget som tillåter användare att rulla tillbaka snabbt.

Vi hoppas att den här artikeln hjälpte dig att add to en fade in-effekt till den sista widgeten i ditt sidebar i WordPress. För mer jQuery-godis, kontrollera de bästa jQuery tutorials för WordPress.

Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Google+.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

10 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Roger Perkin

    I am trying to implement this on my site but it’s not working

    2 Questions

    are you able to check my site and verify the sidebar div id?

    Also should the enqueue script be get_stylesheet_directory_uri() . and not get_template_directory

    Thanks – would love to get this working
    Roger

  3. Jonathan

    I was wondering can this be done instead off fade in to fade out an sticky widget??

  4. Johnny

    Hi I’m trying to implement this on my page and can’t seem to get it working. Added the .js file to my theme directory’s js folder and added it to my functions.php and no fade is showing. Where exactly should I be adding it in my functions.php as it’s a big file.

    I’m using twenty fourteen, and my sidebar ID is ”content-sidebar” which I have changed in the .js file. I have a few other widgets in the sidebar so perhaps something is conflicting?

    Any help is appreciated! Thanks.

    • Johnny

      Here is my .JS Code

      jQuery(document).ready(function($) {
      /**
      * Configuration
      * The container for your sidebar e.g. aside, #sidebar etc.
      */

      var sidebarElement = $(’div#content-sidebar’);

      // Check if the sidebar exists
      if ($(sidebarElement).length > 0) {

      // Get the last widget in the sidebar, and its position on screen

      var widgetDisplayed = false;
      var lastWidget = $(’.widget:last-child’, $(sidebarElement));
      var lastWidgetOffset = $(lastWidget).offset().top -100;

      // Hide the last widget
      $(lastWidget).hide();

      // Check if user scroll have reached the top of the last widget and display it
      $(document).scroll(function() {

      // If the widget has been displayed, we don’t need to keep doing a check.

      if (!widgetDisplayed) {
      if($(this).scrollTop() > lastWidgetOffset) {
      $(lastWidget).fadeIn(’slow’).addClass(’wpbstickywidget’);
      widgetDisplayed = true;
      }
      }
      });
      }
      });

    • WPBeginner Support

      Try deactivating all your plugins and see if it works. You can also use inspect element to see if there are any errors.

      Administratör

  5. bb

    Hi wpbeginner, I love this tweak and the solution you’ve been giving to the community, thanks a million! I have a question, please, how can I integrate or if there’s a plugin/solution that can be use to query application forms submitted by applicants and the result show come up in the admin dashboard, for instance; how many applicant are below 25yrs? and the plugin should fetch the result from the database and show the relevant details in a nice table format that can be exported to excel. Possible? Please advise. Thanks

    • Jean Gérard Bousiquot

      You can check Gravity forms for that, but you’ll need to know some PHP. Otherwise you’ll have to pay a developer to help you achieve what you need.

    • Derek Price

      Isn’t this a bit off topic? Did you do this on purpose? If you have a question for WP staff, why not use the contact feature so you don’t take the blog post off topic?

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.