Kann ich die Annahme von Begriffen erzwingen, bevor ich Dateien ansehe oder hochlade?

Manchmal kann es hilfreich sein, den Website-Besucher dazu zu bringen, ein Kontrollkästchen anzukreuzen, um Bedingungen zu akzeptieren, bevor er einen Dateiupload erlaubt.

Sie müssen dieses Kontrollkästchen aktivieren, bevor Sie eine Datei hochladen können.

Mach weiter, überprüfe es.

Daten hochladen

Upload verarbeiten

Dateilimit: 3 Dateien
Größenbeschränkung: 100 MB pro Datei.
Zulässige Typen: aiff, doc, docx, gif, jpg, jpeg, mp3, mp4, mov, pdf, png, tif, tiff, zip
Ziehen Sie hier Dateien per Drag & Drop oder verwenden Sie die Schaltfläche Durchsuchen.

Wenn Sie mit ein wenig Programmieren vertraut sind, können Sie dies mit einem einfachen JavaScript erreichen, das Ihrem Design und HTML im Seiteninhalt hinzugefügt wird. Hier ist wie:

Seiteninhalt

Platzieren Sie einen HTML-Block über dem Shortcode „Simple File List“. Dies ist einfach ein Kontrollkästchen gefolgt von Ihrer Nachricht. Wenn Sie möchten, können Sie einen Link zum Volltext hinzufügen.

<p>
  <input id="myCheckToUpoad" type="checkbox" name="Checkbox" value="YES">Check this Box.
</p>

JavaScript in Ihrem Design

Der Schlüssel zum obigen Code ist der id="myCheckToUpoad". Das JavaScript wird sich hier einklinken und das Upload-Formular ein- oder ausblenden. Sie können dies auch für die Dateiliste oder beides verwenden.

Suchen Sie Ihr aktuelles Thema functions.php Datei.

Fügen Sie diesen Code hinzu und speichern Sie ihn.

// Function to output JavaScript in theme <head>

function myHeadHurts() { ?>

<script>

jQuery(document).ready(function() {

	jQuery('#eeSFL_UploadForm').hide(); // Hide the form straight away
	 
	jQuery('#myCheckToUpload').on('click', function() { // The box is clicked...
	
	     // Either show or hide, depending if ticked or not       
	     if (jQuery('#eeSFL_UploadForm').is(':visible')) { 
	
	         jQuery('#eeSFL_UploadForm').slideUp(); // Hide
	
	        } else {
	
	             jQuery('#eeSFL_UploadForm').slideDown(); // Show
	     }
	
	});

}); // END Ready Function

</script>

<?php }

// Hook into WordPress loading process
add_action('wp_head', 'myHeadHurts'); // Add to the page's <head>

Es gibt viele Verbesserungen, die an diesem Beispiel vorgenommen werden könnten, aber dies ist im Grunde alles, was Sie brauchen, um loszulegen.

Lass es mich wissen falls du Hilfe benötigst.

Hinterlasse einen Kommentar

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.