Meer lezen met JavaScript op een tekstblok in WordPress

1. Voeg dit toe in de functions:

add_action( ‘wp_enqueue_scripts’, ’theme_enqueue_styles’ );

wp_enqueue_script( ‘readmore-script’, get_stylesheet_directory_uri() . ‘/js/readmore.min.js’, array(), ‘1.0.0’, true );

wp_enqueue_script( ‘costum-script’, get_stylesheet_directory_uri() . ‘/js/costum.js’, array(), ‘1.0.0’, true );

 

2. Maak daarna een ‘js’ mapje aan in de child map.

 

3. Maak een bestand aan in dit mapje met de naam costum.js

 

4. Plaats in dit bestand de volgende code:

jQuery(document).ready(function () {

jQuery(‘#loadmore’).readmore({

speed: 75,

collapsedHeight: 315,

moreLink: ‘<a href=”#” class=”btn-toggle”><span>Lees meer <i class=”fas fa-angle-down”></i></span></a>’,

lessLink: ‘<a href=”#” class=”btn-toggle active”><span>Lees minder <i class=”fas fa-angle-up”></i></span></a>’

});

});

 

5. Maak nog een bestand aan in de js map met de naam readmore.min.js

 

6. Plaats de volgende code in dit bestand:

/*!

* @preserve

*

* Readmore.js jQuery plugin

* Author: @jed_foster

* Project home: http://jedfoster.github.io/Readmore.js

* Licensed under the MIT license

*

* Debounce function from http://davidwalsh.name/javascript-debounce-function

*/

!function(t){“function”==typeof define&&define.amd?define([“jquery”],t):”object”==typeof exports?module.exports=t(require(“jquery”)):t(jQuery)}(function(t){“use strict”;function e(t,e,i){var o;return function(){var n=this,a=arguments,s=function(){o=null,i||t.apply(n,a)},r=i&&!o;clearTimeout(o),o=setTimeout(s,e),r&&t.apply(n,a)}}function i(t){var e=++h;return String(null==t?”rmjs-“:t)+e}function o(t){var e=t.clone().css({height:”auto”,width:t.width(),maxHeight:”none”,overflow:”hidden”}).insertAfter(t),i=e.outerHeight(),o=parseInt(e.css({maxHeight:””}).css(“max-height”).replace(/[^-d.]/g,””),10),n=t.data(“defaultHeight”);e.remove();var a=o||t.data(“collapsedHeight”)||n;t.data({expandedHeight:i,maxHeight:o,collapsedHeight:a}).css({maxHeight:”none”})}function n(t){if(!d[t.selector]){var e=” “;t.embedCSS&&””!==t.blockCSS&&(e+=t.selector+” + [data-readmore-toggle], “+t.selector+”[data-readmore]{“+t.blockCSS+”}”),e+=t.selector+”[data-readmore]{transition: height “+t.speed+”ms;overflow: hidden;}”,function(t,e){var i=t.createElement(“style”);i.type=”text/css”,i.styleSheet?i.styleSheet.cssText=e:i.appendChild(t.createTextNode(e)),t.getElementsByTagName(“head”)[0].appendChild(i)}(document,e),d[t.selector]=!0}}function a(e,i){this.element=e,this.options=t.extend({},r,i),n(this.options),this._defaults=r,this._name=s,this.init(),window.addEventListener?(window.addEventListener(“load”,c),window.addEventListener(“resize”,c)):(window.attachEvent(“load”,c),window.attachEvent(“resize”,c))}var s=”readmore”,r={speed:100,collapsedHeight:200,heightMargin:16,moreLink:'<a href=”#”>Read More</a>’,lessLink:'<a href=”#”>Close</a>’,embedCSS:!0,blockCSS:”display: block; width: 100%;”,startOpen:!1,blockProcessed:function(){},beforeToggle:function(){},afterToggle:function(){}},d={},h=0,c=e(function(){t(“[data-readmore]”).each(function(){var e=t(this),i=”true”===e.attr(“aria-expanded”);o(e),e.css({height:e.data(i?”expandedHeight”:”collapsedHeight”)})})},100);a.prototype={init:function(){var e=t(this.element);e.data({defaultHeight:this.options.collapsedHeight,heightMargin:this.options.heightMargin}),o(e);var n=e.data(“collapsedHeight”),a=e.data(“heightMargin”);if(e.outerHeight(!0)<=n+a)return this.options.blockProcessed&&”function”==typeof this.options.blockProcessed&&this.options.blockProcessed(e,!1),!0;var s=e.attr(“id”)||i(),r=this.options.startOpen?this.options.lessLink:this.options.moreLink;e.attr({“data-readmore”:””,”aria-expanded”:this.options.startOpen,id:s}),e.after(t(r).on(“click”,function(t){return function(i){t.toggle(this,e[0],i)}}(this)).attr({“data-readmore-toggle”:s,”aria-controls”:s})),this.options.startOpen||e.css({height:n}),this.options.blockProcessed&&”function”==typeof this.options.blockProcessed&&this.options.blockProcessed(e,!0)},toggle:function(e,i,o){o&&o.preventDefault(),e||(e=t(‘[aria-controls=”‘+this.element.id+'”]’)[0]),i||(i=this.element);var n=t(i),a=””,s=””,r=!1,d=n.data(“collapsedHeight”);n.height()<=d?(a=n.data(“expandedHeight”)+”px”,s=”lessLink”,r=!0):(a=d,s=”moreLink”),this.options.beforeToggle&&”function”==typeof this.options.beforeToggle&&this.options.beforeToggle(e,n,!r),n.css({height:a}),n.on(“transitionend”,function(i){return function(){i.options.afterToggle&&”function”==typeof i.options.afterToggle&&i.options.afterToggle(e,n,r),t(this).attr({“aria-expanded”:r}).off(“transitionend”)}}(this)),t(e).replaceWith(t(this.options[s]).on(“click”,function(t){return function(e){t.toggle(this,i,e)}}(this)).attr({“data-readmore-toggle”:n.attr(“id”),”aria-controls”:n.attr(“id”)}))},destroy:function(){t(this.element).each(function(){var e=t(this);e.attr({“data-readmore”:null,”aria-expanded”:null}).css({maxHeight:””,height:””}).next(“[data-readmore-toggle]”).remove(),e.removeData()})}},t.fn.readmore=function(e){var i=arguments,o=this.selector;return e=e||{},”object”==typeof e?this.each(function(){if(t.data(this,”plugin_”+s)){var i=t.data(this,”plugin_”+s);i.destroy.apply(i)}e.selector=o,t.data(this,”plugin_”+s,new a(this,e))}):”string”==typeof e&&”_”!==e[0]&&”init”!==e?this.each(function(){var o=t.data(this,”plugin_”+s);o instanceof a&&”function”==typeof o[e]&&o[e].apply(o,Array.prototype.slice.call(i,1))}):void 0}});

 

7. Plaats de volgende code in de style.css:

/* read more */

.btn-toggle {

position : relative;

}

 

.btn-toggle::before {

display : inline-block;

background : #e3e3e3;

content : ‘ ‘;

width : 100%;

height : 1px;

}

 

.btn-toggle span {

position: absolute;

z-index: 999;

left: 0;

right: 0;

background: #FFF;

border-radius: 3px;

margin: 0 auto;

padding: 12px 20px;

text-align: center;

white-space: nowrap;

font-size: 12px;

line-height: 1.0em;

text-align: center;

box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.09);

width: 140px;

border: 1px solid #e2e2e2;

color:#777;

}

 

.btn-toggle span i {

float : right;

margin : 1px 0 0 10px;

}

 

.btn-toggle::after {

position : absolute;

display : inline-block;

left : 0;

top : 0;

background: linear-gradient(00deg, rgba(22,33,27,1) 10%, rgba(22,33,27,0) 80%);

content : ‘ ‘;

margin : -80px 0 0;

width : 100%;

height : 80px;

}

 

.btn-toggle.active::after {

display : none;

}

 

8. Plaats op het tekstblok een id met de naam loadmore

Ga naar de bovenkant