ওয়ার্ডপ্রেস মেনুতে জাভাস্ক্রিপ্ট যুক্ত করুন

9

ওয়ার্ডপ্রেস মেনু আইটেমের URL অংশে জাভাস্ক্রিপ্ট রাখার কোনও উপায় আছে? আমার সাইটে আমার লাইভ চ্যাট ফাংশন রয়েছে এবং লাইভ চ্যাটটি খোলার জন্য একটি লিঙ্ক তৈরি করার জন্য আমার এখানে এই কোডটি দেওয়ার কথা রয়েছে (এখানে প্রস্তাবিত হিসাবে)।

<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
    Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->

ক্লায়েন্টটি ইউটিলিটি নাভি বারে লিঙ্কটি চায়, যা ওয়ার্ডপ্রেস ড্যাশবোর্ডে একটি ওয়ার্ডপ্রেস মেনু ব্যবহার করে তৈরি করা হয়েছিল। তবে আমি যখন javascript:void(0);" onclick="olark('api.box.expand')ওয়ার্ডপ্রেস ড্যাশবোর্ডের ইউআরএল বক্সে অনুলিপি করে আটকান তখন এটি কেবল অদৃশ্য হয়ে যায় এবং লিঙ্কটি নিষ্ক্রিয় থাকে।

আমি যে কিছু পড়েছি তা বলেছিল যে আমি সম্ভবত লিঙ্কটিতে একটি কাস্টম ক্লাস রাখতে পারি এবং তারপরে একটি জাভাস্ক্রিপ্ট ফাংশন লিখতে পারি যেটি যখন ক্লাসের সাথে লিঙ্কটি ক্লিক করা হয় তখন আগুন লাগে। আমি চেষ্টা করেছি, যদিও, এবং আমি এটি কাজ করতে পারি না। আমি খুব বেশি জাভাস্ক্রিপ্ট জানি না, সুতরাং এটি সম্ভব যে আমি এটি সম্পূর্ণ ভুল লিখেছিলাম।

কেউ কি জানেন, এটা কিভাবে করে? আমি প্লাগিন ব্যবহার না করে এটি করতে চাই।

menus javascript navigation

— mcography
সূত্র

ইউজার ইন্টারফেসের মাধ্যমে আপনি জাভাস্ক্রিপ্ট মেনুতে যুক্ত করতে সক্ষম হবেন না এবং onclickজাভাস্ক্রিপ্ট চালানোর জন্য আপনি কখনই সেই গুণটির উপর নির্ভর করতে পারবেন না

— টম জে নওয়েল

কেন না? লাইভ চ্যাট সংস্থাটি আমাকে এই কোডটি সরবরাহ করেছিল।

— এমকিগ্রাফি

1

এর অর্থ এই নয় যে এটি করার সঠিক উপায়, jQuerys .click()ইভেন্টটি দেখুন

— টম জে নোয়েল

আমি এটা বলার চেষ্টা করছিলাম না যে এটি ছিল। আমি কেবল কেন এই onclickগুণাবলীর উপর নির্ভর করা উচিত তা জিজ্ঞাসা করার চেষ্টা করছিলাম । আমি সন্ধান করব .click()।

— এমকিগ্রাফি

এইচটিএমএল একটি দস্তাবেজ সংজ্ঞায়িত করার জন্য, একটি অনক্লিক বৈশিষ্ট্য যুক্ত করা একইভাবে খারাপ যে কোনও ইনলাইন স্টাইল ট্যাগ বা বৈশিষ্ট্য যুক্ত করা খারাপ, এটি তাদের মিশ্রিত করে। এটি কেন খারাপ, এই প্রশ্নটি দেখুন

— টম জে নওয়েল

7

ভাল যে এটি কাজ করে। যদি এটি কোনও ক্লায়েন্টের জন্য হয় বা আপনি যদি কেবল ক্লিনার কোড চান তবে আপনি এটি @ টম জে নওলের পরামর্শ অনুসারে করতে পারেন।

একটি কাস্টম মেনু আইটেম যুক্ত করুন, এটি কোথাও বা কোথাও লিঙ্ক করুন। মেনু আইটেম আইডি (প্রতিটি আইটেমের একটি রয়েছে) সন্ধান করুন এবং তারপরে jQuery সহ সেই আইডি লক্ষ্য করুন।

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

এই উপায়ে, যখনই কোনও ব্যবহারকারী menu-itemউপরের স্ক্রিপ্টটিতে ক্লিক করবে তখনই এটি ট্রিগার করা হবে। আপনি ফাংশন.এফপি মাধ্যমে jquery স্ক্রিপ্ট এঙ্কুই করতে পারেন।

হালনাগাদ:

আপনার olark.js লোড হচ্ছে কিনা তা নিশ্চিত করুন। আপনি যদি এটি পাদচরণ বা শিরোলেখের সাথে যুক্ত করে থাকেন তবে আপনার পৃষ্ঠাটি পরীক্ষা করুন এবং স্ক্রিপ্টটি আছে তা নিশ্চিত করুন। এছাড়াও, নিশ্চিত হয়ে নিন যে আপনি ব্রাউজারের কনসোলে কোনও ত্রুটি পাচ্ছেন না।
আপনার জেএসগুলি একটি নথির প্রস্তুত দিয়ে মুড়ে দিন, যাতে স্ক্রিপ্টটি সঠিক সময়ে কার্যকর হয়:
```
jQuery(document).ready(function($) {
  $("#menu-item-38872").on("click", function(e){
  e.preventDefault();
  olark('api.box.expand');
  });
});
```

লিঙ্কটি লোড হচ্ছে না এর অর্থ হ'ল স্ক্রিপ্টটিতে কিছু সমস্যা আছে বা স্ক্রিপ্টটি মোটেই লোড হচ্ছে না।

— gdaniel
সূত্র

আপনার উত্তরের জন্য ধন্যবাদ. আমি জাভাস্ক্রিপ্ট সম্পর্কে তেমন কিছুই জানি না, তাই আপনি কি আমাকে বলতে পারেন যে আপনার সমাধানটি আরও ভাল / ক্লিনার কেন? শুধু বুঝতে চেষ্টা করছি।

— এমকিগ্রাফি

আমি olark.js নামে একটি ফাইল তৈরি করেছি এবং এটিকে সারিয়ে দিয়েছি, তবে লিঙ্কটি এখনও সীমাবদ্ধ করে #(কারণ এটি আমি ওয়ার্ডপ্রেস ড্যাশবোর্ডে সেট করেছি)। এইটা আমি olark.js এ রেখেছি:

$("#menu-item-38872").on("click", function(e){        e.preventDefault();       // olark code here       olark('api.box.expand'); });

আমি কী ভুল করছি?

— এমকিগ্রাফি

আহ হা! jQuery(document).ready(function($) {কৌতুক করেনি! ধন্যবাদ, @ জিডানিয়েল!

— এমকিগ্রাফি

খুশী এটা কাজ করে। ধারণাটি হ'ল লিপিটি সামগ্রী থেকে পৃথক রাখা। সে কারণেই এটি সেভাবে করার পরামর্শ দেওয়া হচ্ছে।

— gdaniel

3

সমাধান # 1 (আদর্শ নয়, তবে এটি কাজ করে):

// Live Chat Utility Link
add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
function live_chat_utility_link ( $items, $args ) {
    if ( $args->theme_location == 'utility' ) {
        $items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
    }
    return $items;
}

সমাধান # 2 (আদর্শ):

উপরের মন্তব্যগুলির সাহায্যে, আমার জন্য কাজ করা সমাধানটি এখানে দেওয়া হল। আমি olark.js নামে একটি নতুন ফাইল তৈরি করেছি এবং এতে এই কোডটি রেখেছি:

jQuery(document).ready(function($) {
    $("#menu-item-38872").on("click", function(e){ 
          e.preventDefault();
          // olark code here
          olark('api.box.expand');
    });
});

তারপরে, আমি নিম্নলিখিত কোডটি সহ আমার ফাংশন.এফপি-তে স্ক্রিপ্টটি তৈরি করলাম:

function olark_script() {
    wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
    wp_enqueue_script( 'olark' );
}

add_action( 'wp_enqueue_scripts', 'olark_script' );

যদি এটি কাজ না করে তবে নিশ্চিত হয়ে নিন যে আপনি আপনার স্ক্রিপ্টটি সঠিকভাবে সজ্জিত করছেন। আমি একটি শিশু থিম ব্যবহার করছি, সুতরাং এর get_stylesheet_directory_uri()পরিবর্তে আমাকে ব্যবহার করতে হয়েছিল get_template_directory_uri()।

— mcography
সূত্র

1

আমি মনে করি একটি আরও 'নির্ভরযোগ্য' বিকল্প আছে। উদাহরণস্বরূপ আপনি যদি আপনার কোডটি বিকাশ থেকে উত্পাদনে স্থানান্তর করেন তবে মেনু আইটেম নম্বরের উপর নির্ভর করা কাজ করার গ্যারান্টিযুক্ত নয়। আপনি যদি নাম্বারটিকে কোনও সেটিংয়ে পরিণত করেন তবে এটি আরও ভাল হচ্ছে, তবে এখনও সত্যই ভাল নয়।

বিকল্প হতে পারে আপনার মেনু-আইটেম থেকে #olark এর মতো অস্তিত্বহীন অ্যাঙ্কারের সাথে লিঙ্ক করা। এটি ব্যবহারকারীর ইন্টারফেস ব্যবহার করে সেট করা যেতে পারে এবং নির্ভরযোগ্য পরিবেশগুলি। তারপরে আপনার পৃথক স্ক্রিপ্টের হ্যাশ-পরিবর্তন (ব্রাউজারের ঠিকানা বারে) পর্যবেক্ষণ করা উচিত এবং সেই অনুযায়ী কাজ করা উচিত।

একটি সাধারণ কফি স্ক্রিপ্ট উদাহরণ যা জাভাস্ক্রিপ্টে সংকলন করে যা হ্যাশচেঞ্জ শোনায়:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#enable sharing the url
if location.hash then @showLogin()

@showLogin এমন একটি ফাংশন যা একটি ডায়ালগ প্রদর্শন করে যা হ্যাশ '# লগিন' এর সমান হলে আপনাকে লগইন করতে দেয়।

[সম্পাদনা] যথেষ্ট মজার, আপনি যদি কোনও মেনু আইটেম ক্লিক করেন তবে ঠিকানার ঠিকানাতে হ্যাশ পরিবর্তন হবে না । এটি অপ্রত্যাশিত এবং অন্য স্ক্রিপ্টের কারণে এটি ডিফল্ট ইভেন্টটিকে আটকাতে পারে। সুতরাং একটি লিঙ্কে ক্লিক করার প্রতিক্রিয়ায় উইন্ডোটির অবস্থান পরিবর্তন করতে আমাকে আরও একটি লাইন যুক্ত করতে হয়েছিল:

# make sure the hash changes when a link in the menu is clicked (somehow, it doesn't in my case)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/ সম্পাদনা]

— বার্ট ম্যাকলিড
সূত্র

-2

আপনি এনএভি-মেনু আইটেমটিতে অতিরিক্ত স্ক্রিপ্ট যুক্ত করতে এটি ফাংশন.এফপি ব্যবহার করতে পারেন

function add_nav_class($output) {
$output= preg_replace('/<a/', '<a id="join_club" onclick="awf_Form_.showForm(); return false;"', $output, -1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

— পিকে রে
সূত্র

এটি কোনও সঠিক সমাধান নয়, এটি মেনুটিকে পুরোপুরি ভেঙে দেবে, কারণ সমস্ত বোতামই প্রভাবিত হবে, এবং প্রশ্নটি কী হয়েছিল তা তা করে না।

— মিলান পেট্রোভিক