Plugin Author
malihu
(@malihu)
Hi Schweg,
Please read plugin’s basic tutorial here:
https://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/
In your document page, add the id danke to your “Danke” element – see “Creating id targets in post block editor (Gutenberg)” in the tutorial (let me know if you use some other page builder).
In your start page, create the link as you normally do in the post editor and give it the URL /dokument/#danke – see “Creating links in post block editor (Gutenberg)” in the tutorial.
Create your other links and targets the same way. Use the /dokument/#your-id pattern in your links URLs so they point correctly to your document page sections.
Let me know if you need further or more specific assistance 🙂
Thread Starter
schweg
(@schweg)
hello malihu
thank you for your quick reply
i use the: Enfold – Responsive Multi-Purpose Theme by Kriesi
using the WP Classic Editor
It would help me for the beginning if you could make me two examples.
login:
https://vereinsportal.li/wp-login.php
admdorfarchiv
!mt6nzbw2lI1C
kind regards
Franz
Plugin Author
malihu
(@malihu)
OK I’ve just done the “Arfel” and “Wagen” links.
Since you use the classic editor use plugin’s shortcodes to create the targets (like I did in the document page).
In the homepage I created the links using plugin’s “Insert/edit Page scroll to id link” toolbar button (simply select the word you want to link and click the “Insert/edit Page scroll to id link” button in the classic editor toolbar).
You’ll note that I used the /dokument/#id pattern for the links URLs. This is for the document page. If you create targets on another page (e.g. dokument2) use that page slug in the links (e.g. /dokument2/#id).
I’ve also added an offset value in “Page scroll to id” settings in order to offset your sticky header when scrolling.
Please note that in desktop your document page is shorter (i.e. it doesn’t have enough content) so the scrolling you see is minimal.
Thread Starter
schweg
(@schweg)
Hello M
Thank you for the examples.
I have now made a 2 page.
with the links on menu item Home “Erstens” and “Danke”
it jumps me to the right page but not to the right expression
What am I doing wrong
what do I have to specify in the costomizer CSS so that the expression is automatically red?
PS: I have made you a small donation for cafe breaks
thanks
kind regard
Franz
Plugin Author
malihu
(@malihu)
Thanks a lot for your donation and support 🙂
You simply needed to change the target id value in the shortcode. You had in both cases: [ps2id_wrap id='wagen'] and I changed the ids to: [ps2id_wrap id='erstens'] and [ps2id_wrap id='danke'] according to the links you created.
You just need to remember to set each target id to the one you have in your link. For example:
Link URL value: #some-id
Target id value: some-id
Another link URL value: #some-other-id
Another target id value: some-other-id
You simply “connect” links and targets 🙂
Let me know if you need more help
Thread Starter
schweg
(@schweg)
hello malihu
thank you for your info
have now on a sharp side
inserted some expressions
with 2 I do not know what I do wrong
once it makes me a blank line at Arfl
and once a line break at gözigs Höörli
https://dorfgeschichte.li/dialekt-woerter-korrigiert/
Thread Starter
schweg
(@schweg)
can i enter a code in css that changes the color of the searched found word
thank you
kind regards
Franz
Plugin Author
malihu
(@malihu)
You’re welcome.
I can’t see the blank/new line on https://dorfgeschichte.li/dialekt-woerter-korrigiert/. Did you fix it or?
For the color of the target term, since you don’t have the links in your top menu, you’ll need to use javascript. Can you add some js code in your page?
For example, you can add the following in your theme/child-theme footer.php template in a new line right before the closing body tag (</body>):
<script>
(function($){
$(window).on("load",function(){
setTimeout(function(){
var _hash=window.location.hash;
if(_hash){
var targetElem=$(_hash);
if(targetElem.length){
targetElem.addClass("highlighted-term");
}
}
},100);
});
})(jQuery);
</script>
After adding the above, add something like the following CSS:
.highlighted-term + span{
background-color: yellow;
}
and style it the way you want.
Does this help?
Thread Starter
schweg
(@schweg)
hello malhou
I think we have misunderstood each other.
my english is not so good
can i send you printscreens somewhere
the background I will then try later.
thank you
kind regards
Franz
Plugin Author
malihu
(@malihu)
Thread Starter
schweg
(@schweg)
Hello Mailih
did you get my e-mail
Sender [email protected]
(Schweg)
Thanks and
kind regards Franz
Plugin Author
malihu
(@malihu)
Yes I have. I’ll check it asap and let you know.
Thread Starter
schweg
(@schweg)
I have sent you an email again
Color of the target works now
have sent you again examples
important for me would be especially
that the print remains in line with the example:
like: Der Versehgang / Versächa
Not like this:
Der Versehgang /
Versächa
Thanks for everything
Greetings
Thread Starter
schweg
(@schweg)
Thanks Manos
Now everything fits great
Thanks again
Then you can close this ticket
Kind regards
Schweg
Plugin Author
malihu
(@malihu)
Thanks. If you need more help, let me know 🙂
