How to Add Load More Posts Button in WordPress

क्या आप अपनी WordPress website में Load More Posts Button Add करना चाहते हैं।

[{"selector":"#anim-fac15d71-8061-4b81-91aa-3b5f0ade6d4e","keyframes":[{"offset":0,"transform":"translate3d(0, -266.16389%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -74.84528586799999%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -25.445267884%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -9.555283651%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -4.1521566839999995%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] Learn more

सबसे पहले, अपनी वेबसाइट में Ajax Load More plugin को install और activate करें।

[{"selector":"#anim-323b8cb6-0e79-4c2d-b3d7-e41e24aabfb5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-921a3370-12d1-41ec-b6f7-3179aea525c2","keyframes":{"transform":["translate3d(100.24631%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-af3a49ae-0e41-4d58-b206-5ac394780f62","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc0e2839-b754-4e81-a4bb-9ee461796149","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

इसके बाद लेफ्ट साइड में Ajax Load More पर क्लिक करने के बाद setting पर क्लिक करें।

[{"selector":"#anim-fa9ebe5c-f0fb-4661-96c9-360707d00a14","keyframes":[{"offset":0,"transform":"translate3d(0, -222.72442%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -62.630106904%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -21.292454552000002%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -7.995806678000001%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.474500952%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] [{"selector":"#anim-a20dbd0a-7008-4c0e-8db5-9ba75044da67","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d644b2ae-1183-4ca9-8671-db6fe8e69b59","keyframes":{"transform":["translate3d(0px, 177.58538%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

इसके बाद थोड़ा नीचे scroll करने पर आप Button/Loading Style option का उपयोग कर load more button का color change कर सकते हैं।

[{"selector":"#anim-16b77f3b-b087-4147-9348-8f13f3779701","keyframes":{"transform":["translate3d(100.24631%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-bcd3bb6c-40c9-4df3-b264-f505ea8b8783","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-d258ef48-289c-4c3e-83a4-ae5016c97ad0","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-a4ccb790-6984-42f2-8936-ff2f07ee36bc","keyframes":{"transform":["rotateZ(-180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] Learn more

इसके बाद आप लेफ्ट साइड में Repeater Templates पर क्लिक करें। अब आपको यहां पर 1 कोड paste करना है

[{"selector":"#anim-6e01efa8-08b9-4d81-b78b-38e29af0358e","keyframes":[{"offset":0,"transform":"translate3d(0, -198.2906%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -55.75931672%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -18.95658136%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -7.118632540000001%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.09333336%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] Learn more

Code को कॉपी करने के लिए सबसे पहले अपने होस्टिंग प्रोवाइडर अकाउंट में लॉगिन करें। उसके बाद file manager को ओपन करें।

[{"selector":"#anim-f4dc01bc-17cc-4f34-a9aa-d77166f05b2b","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] Learn more

Public_html directory

[{"selector":"#anim-89d12f71-20f1-4015-a7c6-465314de7fb6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0526f021-9856-482d-b553-5c4db4883327","keyframes":{"transform":["translate3d(-101.23152%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8c3720e0-7aea-4862-a0eb-2e27d0715b56","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9e4bceea-3a50-4dd1-ada1-b2b8bb4fed7e","keyframes":{"transform":["translate3d(-101.72414%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b5dad9cb-8af6-43b6-894a-5137da09e542","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20413e29-e32f-4b02-8457-b91830db548d","keyframes":{"transform":["translate3d(-101.72414%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Arrow Arrow Learn more

इसके बाद current active theme folder में जाए और यहां पर content.php file पर राइट क्लिक करने के बाद edit पर क्लिक करें।

[{"selector":"#anim-59e9eb20-429f-497f-ad5a-8943bd32e866","keyframes":{"transform":["translate3d(-100%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-f36e57bd-10bf-4990-bcf8-ba8fe5873954","keyframes":{"transform":["rotateZ(-180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-e743ebb2-ae43-44c5-93dc-81c69eadfb5e","keyframes":{"transform":["translate3d(100.24631%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-87422f31-bb4f-4d18-b220-35072d821fbd","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] Learn more

इसके बाद template code box में दिए गए code को remove कर दे और जो आपने कोड content.php file से copy किया था उस कोड को paste करने के बाद save template button पर क्लिक करना ना भूले।

अब आपको load more button show करने के लिए shortcode generate करना होगा। इसके लिए आप shortcode builder option पर क्लिक करें।

अब आपको राइट साइड में Shortcode Output section के नीचे बने copy shortcode button पर क्लिक कर shortcode को copy कर लेना है।

अब आपको इस कोड को अपने theme में paste करना होगा। इस code को आपको theme में उन फाइल्स में add करना होगा, जहां पर आप load more button add करना चाहते हैं।

आमतौर पर आप इस कोड को index.php, archives.php, categories.php इत्यादि files में add कर सकते हैं।

endwhile tag के ठीक नीचे आप code को जोड़ सकते हैं।

Code ऐड करने के बाद update file button पर क्लिक करना ना भूलें।