the answer for all question about Oxygen Builder plugin and WordPress



Please I need the help of JavaScript experts here. I’m trying to achieve the following:

1. Add rel=’noopener’ to All social media links in the document – DONE
2. Add aria-label to All social media links in the document – DONE

Here is the…



Tolong saya butuh bantuan para pakar JavaScript di sini. Saya mencoba untuk mencapai hal-hal berikut:

1. Add rel= ‘noopener’ ke Semua tautan media sosial di dokumen – SELESAI
2. Tambahkan label aria ke Semua tautan media sosial dalam dokumen – SELESAI

Ini kode untuk BAGIAN PERTAMA

// Atur label aria untuk ikon sosial
Biarkan facebook = dokumen. QuerySelectorAll (‘. Oksi-sosial-ikon-facebook ‘);
Biarkan instagram = dokumen. QuerySelectorAll (‘. Oksi-sosial-ikon-instagram ‘);
biarkan twitter= dokumen. QuerySelectorAll (‘. Oksi-sosial-ikon-twitter ‘);

Jika (facebook) {
untuk (i = 0; i < facebook. panjang; i ++) {
Facebook [i]. setAtribut (‘ label aria ‘, ‘ halaman Facebook ‘);

Jika (instagram) {
untuk (i = 0; i < instagram. panjang; i ++) {
instagram [i]. setAttribute (‘ label aria ‘, ‘ halaman Instagram ‘);

Jika (twitter) {
Untuk (i = 0; i < twitter. panjang; i ++) {
Twitter [i]. setAtribute (‘ label aria ‘, ‘ halaman Twitter ‘);

Saya perlu bantuan di bagian kedua dari kode ini. Saya mencoba untuk mencapai hal-hal berikut:
1. Solve ‘Links tidak memiliki nama yang discernible’ untuk link media sosial untuk Semua link media sosial di dokumen dengan menambahkan teks ke link – SEBAGIAN SELESAI

MASALAH: Saya tidak bisa menerapkan kode untuk semua tautan dalam dokumen, itu hanya berlaku untuk elemen ikon sosial pertama dalam dokumen.
Ini adalah pengambilan saya:
Sebuah. Buat elemen <p>
b. Tambahkan innerText ke elemen <p> dengan nilai label aria
C. Tambahkan elemen <p> ke tautan.

Aku mencoba menggunakannya. QuerySelectorAll, tetapi mengalami kesalahan.
Ini kode untuk BAGIAN KEDUA

// Pilih kelas ikon sosial umum
Biarkan sosialIcons = dokumen. QuerySelektor (‘. oxy-sosial-ikon ‘);

// Pilih tautan ikon sosial
Biarkan socialLinks = sosialIcons. DapatkanLemenByTagName (‘a’);

Fungsi setAccesiblity () {

untuk (i= 0; i<socialLinks. panjang; i ++) {

// tambahkan rel = noopener ke tautan ikon sosial
SocialLinks [i]. setAtribute (‘ rel ‘, ‘ noopener ‘);
SocialLinks [i]. setAtribute (‘ dinonaktifkan ‘, ‘);

// Buat elemen paragraf dan berikan kelas
P=dokumen. menciptakanElemen (‘p’);
P. kelasName = ‘nama-tautan’;

// Atur konten paragraf ke nilai label aria
P. innerText = socialLinks [i]. atribut [‘aria-label’]. nilai;

// tambahkan paragraf ke tautan ikon sosial dan atur untuk tidak menampilkan satu pun
SocialLinks [i]. appendChild (p);
P. Gaya. tampilan = ‘tidak ada’;

Jika (socialIcons) {

SetAccesiblity ();


Saya menghargai bantuan apa pun karena masih banyak yang lebih suka menggunakan elemen ikon sosial akan menemukan kode ini sangat berguna

Diterjemahkan dari Bahasa Inggris


  1. Joshua Hawkins says

    This is actually easier with jQuery than vanilla JS. This code snippet should simplify your first part.

    add_action( ‘wp_head’, function () { ?>

  2. Hakira Shymuy says

    Did you try document.getElementsByClassName instead of querySelector?
    im not sure if querySelector will actually pull all from the doc
    Anyway you can console log that

  3. Kevin Pauls says

    are you able to provide a live link to take a better look?

  4. Kevin Pauls says

    feel free to dm me

  5. Niko Hannula says

    Are you certain that the hidden paragraph is even needed, shouldn’t the aria-label value be exactly for this reason?

  6. Bruno Pirard says

    I was on the problem yesterday and it is a real concern. I browsed the Github because the ‘Social Network’ module of Oxygen does not allow to output a code in the standards!
    A user requesting an update of the module is seen to answer “it must be done manually” (CodeKitten).

    Yesterday by putting an icon in a link wrapper, impossible to use the pseudo class: hover on the icon because I think the link takes priority. I have gone through some manual code targeting the ids so that the icon changes when the link is in hover.
    It’s a disappointment I have with Oxygen, a lot of known bugs go unaddressed!

    In this specific case, why leave a module ineffective if it is to have to do social networks manually?
    I only see two solutions:
    1) the Oxygen team looks at the subject and corrects its module
    2) it removes it since it does not release a clean and usable code. In this case it would also settle other requests such as being able to use the personalized fields (ACF or other) or to put the networks in a precise order, or to add other networks than those proposed.
    I find it unacceptable that such a popular element (putting social networks) is so complicated and does not hold more attention from developers.
    I still like Oxygen but I’m starting to find flaws in it (like the concern in the new text content and quite a few small things).

Leave A Reply

Your email address will not be published.

Oxyrealm Docs