{"id":235318,"date":"2022-03-02T10:44:00","date_gmt":"2022-03-02T08:44:00","guid":{"rendered":"https:\/\/devowl.io\/?p=235318"},"modified":"2024-10-08T17:29:27","modified_gmt":"2024-10-08T15:29:27","slug":"dateien-herunterladen","status":"publish","type":"blog","link":"https:\/\/devowl.io\/de\/wordpress\/download-files\/","title":{"rendered":"Dateien auf deiner WordPress Website zum Downloaden anbieten"},"content":{"rendered":"<section class=\"l-section wpb_row height_medium\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>In this article, we will show you how to integrate PDF files into your WordPress website so that your visitors can easily download them.<\/p>\n<p>You can offer files (PDF, ZIP, images, etc.) for download in various ways &#8211; whether with or without a plugin. For the sake of completeness, we will show you both methods as well as the advantages of a plugin, so that you can decide for yourself which variant appeals to you more \ud83d\ude09<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\">\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Making files available for download in WordPress (in the Gutenberg editor)<\/h2>\n<p>Now we will show you how you can, for example, offer a PDF file for download in WordPress using only the WordPress settings.<\/p>\n<p>It is important to mention here that the procedure may look different depending on the page builder. However, the principle is roughly the same. Let&#8217;s just assume that you are using the <strong>Gutenberg editor<\/strong>.<\/p>\n<ol>\n<li>Open your WordPress backend.<\/li>\n<li>Go to <em>Media &gt; Add New<\/em>. Upload the desired file here. If you use the <a href=\"https:\/\/devowl.io\/wordpress-real-media-library\/\" target=\"_blank\" rel=\"noopener\">Real Media Library<\/a> folder and file manager, you can also upload the file directly to the correct folder.<\/li>\n<li>After the file has been uploaded, open it by clicking on <em>Edit<\/em>.<\/li>\n<\/ol>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_center\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/copy-media-url-wordpress.png\" aria-label=\"Copy Media URL WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"652\" height=\"361\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/copy-media-url-wordpress-652x361.png\" class=\"attachment-us_652_652 size-us_652_652\" alt=\"Copy Media URL WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/copy-media-url-wordpress-652x361.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/copy-media-url-wordpress-326x181.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/copy-media-url-wordpress-18x10.png 18w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/copy-media-url-wordpress.png 794w\" sizes=\"auto, (max-width: 652px) 100vw, 652px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><ol start=\"4\">\n<li>On the right-hand side, the <em>File URL<\/em> field is displayed, where you will find the URL to the file. Click on <em>Copy URL to clipboard<\/em> to copy the URL.<\/li>\n<li>Now open the page or post where you want to insert the file.<\/li>\n<li>Write the text you want the visitor to click on to go to the download. In our example, this is called <em>Download registration<\/em>.<\/li>\n<\/ol>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-link-wordpress.png\" aria-label=\"Insert Link WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"724\" height=\"572\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-link-wordpress.png\" class=\"attachment-large size-large\" alt=\"Insert Link WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-link-wordpress.png 724w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-link-wordpress-326x258.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-link-wordpress-15x12.png 15w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-link-wordpress-652x515.png 652w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><ol start=\"7\">\n<li>Mark the text. Now a bar with different options appears. Select the link option (see screenshot above).<\/li>\n<li>Paste the copied URL into the corresponding field (<em>right click &gt; Paste<\/em>) and activate the option <em>Open in new tab<\/em> at the bottom.<\/li>\n<li>Save the settings by clicking on the curved arrow to the right of the link. This will open the file for download in a new window and the visitor will not be directed away from your website.<\/li>\n<li>Save it and you&#8217;re done!<\/li>\n<\/ol>\n<p>Now your visitor can, for example, download a PDF file via the link. He or she clicks on the link, lands in a separate window and can easily download the file there.<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Make files available for direct download in WordPress<\/h2>\n<p>If you want to save your visitors the two extra clicks (click on the link and click on &#8220;Download&#8221; in a separate window), you can also offer a file directly for download. This is at least as easy! To do this, you basically proceed as you just did. The difference, however, is that you first have to convert your file into a ZIP file on your computer.<\/p>\n<p><strong>This is how it works:<\/strong> Right-click on the file and select the compress function. Depending on the operating system, this is called something else. It couldn&#8217;t be easier \ud83d\ude09<\/p>\n<p>Then you go through the same steps as just explained.<\/p>\n<p>If your visitor now clicks on the link, no separate window opens, but the file is downloaded directly to his end device. There, however, they have to unpack it again.<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Make files available for download in WordPress (in the Classic Editor)<\/h2>\n<p>If you are oldschool \ud83d\ude0e and use the classic WordPress editor, the procedure is basically the same. However, you add the file here in a different place.<\/p>\n<p>After you have added the file to your library (step 1-2 in the instructions above), proceed as follows:<\/p>\n<ol>\n<li>Open the page where the file is to be made available for download.<\/li>\n<li>Click on Add Media.<\/li>\n<\/ol>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/add-media-wordpress.png\" aria-label=\"Add Media WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"842\" height=\"198\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/add-media-wordpress.png\" class=\"attachment-large size-large\" alt=\"Add Media WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/add-media-wordpress.png 842w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/add-media-wordpress-326x77.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/add-media-wordpress-18x4.png 18w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/add-media-wordpress-652x153.png 652w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>Again, you can insert the file directly and link it in a text. This opens a separate window for the user. Alternatively, you can create a ZIP file and upload it so that the download is done with one click.<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Making files available in WordPress with the help of a plugin<\/h2>\n<p>As you have seen, you don&#8217;t actually need a plugin to make a PDF file available on your WordPress website, for example. However, you will certainly have noticed that the whole thing doesn&#8217;t look very nice. This is where the free plugin <a href=\"https:\/\/de.wordpress.org\/plugins\/media-list\/\" target=\"_blank\" rel=\"noopener\">Medialist<\/a> comes into play.<\/p>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin.png\" aria-label=\"Medialist Plugin\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"299\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin-890x299.png\" class=\"attachment-large size-large\" alt=\"Medialist Plugin\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin-890x299.png 890w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin-326x109.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin-18x6.png 18w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin-652x219.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin-1780x598.png 1780w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-plugin.png 1894w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>The download manager plugin supports you in this:<\/p>\n<ul>\n<li>Display a clear list of downloads<\/li>\n<li>Display certain categories or a certain number of downloads<\/li>\n<li>Matching the style to the page<\/li>\n<\/ul>\n<p>The whole thing works by means of shortcodes, which can be placed in the desired position.<\/p>\n<ol>\n<li>Open your WordPress backend.<\/li>\n<li>Go to <em>Plugins &gt; Add New<\/em>.<\/li>\n<li>Search for the plugin &#8220;Medialist&#8221;. Install and activate it!<\/li>\n<li>Go to the post or page where you want to embed your file.<\/li>\n<li>Upload the file. In the Gutenberg editor, select the <em>File<\/em> block.<\/li>\n<\/ol>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress.png\" aria-label=\"Upload File WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"393\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress-890x393.png\" class=\"attachment-large size-large\" alt=\"Upload File WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress-890x393.png 890w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress-326x144.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress-18x8.png 18w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress-652x288.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/upload-file-wordpress.png 1028w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><ol start=\"6\">\n<li>Upload the file from your files or select it from your WordPress library.<\/li>\n<li>Now it&#8217;s time to insert the shortcode. Create a second Gutenberg block (e.g. above the inserted file). This should be a text block or shortcode block. Enter the shortcode <code class=\"\" data-line=\"\">[medialist]<\/code>.<\/li>\n<\/ol>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress.png\" aria-label=\"Insert Medialist WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"298\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress-890x298.png\" class=\"attachment-large size-large\" alt=\"Insert Medialist WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress-890x298.png 890w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress-326x109.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress-18x6.png 18w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress-652x218.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/insert-medialist-wordpress-1780x595.png 1780w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><ol start=\"8\">\n<li>Alternatively, you can remove the block with the file so that the file is not displayed twice. Save your changes!<\/li>\n<li>The whole thing should now look like the following screenshot.<\/li>\n<\/ol>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress.png\" aria-label=\"Medialist WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"399\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress-890x399.png\" class=\"attachment-large size-large\" alt=\"Medialist WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress-890x399.png 890w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress-326x146.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress-18x8.png 18w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress-652x292.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/medialist-wordpress-1780x797.png 1780w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3>Change the appearance of the list<\/h3>\n<p>You don&#8217;t like the way the file list looks? No problem! For example, you can change the colour of the displayed list. The following colours are available for this purpose:<\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">ml-metro-light-green<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-metro-green<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-metro-magenta<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-metro-light-purple<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-mauve<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-taupe<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-sienna<\/code><\/li>\n<li><code class=\"\" data-line=\"\">ml-white<\/code><\/li>\n<\/ul>\n<p>To change the colour, simply add the style parameter to your shortcode <code class=\"\" data-line=\"\">[medialist]<\/code>. This would look like this for <code class=\"\" data-line=\"\">ml-taupe<\/code>:<\/p>\n<p><code class=\"\" data-line=\"\">[medialist style=&quot;ml-taupe&quot;]<\/code><\/p>\n<p>If you have given several files in your media library a certain keyword, you can also display all these files in a file list.<\/p>\n<p>Example: You give several files the keyword &#8220;download&#8221;. The corresponding shortcode (in addition to the colour) then looks like this: <code class=\"\" data-line=\"\">[medialist style=&quot;ml-taupe&quot; tags=&quot;download&quot;]<\/code><\/p>\n<p>And so you can try out the different shortcodes wildly!<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Manage files with Real Media Library<br \/>\n<img decoding=\"async\" class=\"size-full wp-image-234193 alignright\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/real-media-library-logo.png\" alt=\"real media library logo\" width=\"170\" height=\"160\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/real-media-library-logo.png 170w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/real-media-library-logo-13x12.png 13w\" sizes=\"(max-width: 170px) 100vw, 170px\" \/><\/h2>\n<p>Of course, you can upload PDF files that you want to make available for download across your WordPress media library. The problem here, however, is that you can quickly lose track of where you can find which file.<\/p>\n<p>We therefore recommend that you take a look at the <a href=\"https:\/\/devowl.io\/wordpress-real-media-library\/\" target=\"_blank\" rel=\"noopener\">Real Media Library<\/a> plugin.<\/p>\n<\/div><\/div><div class=\"w-image us_custom_4f24afa8 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress.jpg\" aria-label=\"Real Media Library folder tree in WordPress\" class=\"w-image-h\"><img decoding=\"async\" width=\"793\" height=\"890\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress-793x890.jpg\" class=\"attachment-large size-large\" alt=\"Real Media Library folder tree in WordPress\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress-793x890.jpg 793w, https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress-290x326.jpg 290w, https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress-11x12.jpg 11w, https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress-581x652.jpg 581w, https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress-1585x1780.jpg 1585w, https:\/\/devowl.io\/wp-content\/uploads\/wordpress-plugins\/real-media-library\/real-media-library-folder-tree-in-wordpress.jpg 1920w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>As the name suggests, Real Media Library helps you to create order in your WordPress media by organizing all files &#8211; whether documents, images or videos &#8211; into folders and subfolders.<\/p>\n<p>This way, you don&#8217;t have to go through all the entries to find an uploaded file from five months ago, but can find it in the corresponding folder with just a few clicks.<\/p>\n<\/div><\/div><div class=\"w-btn-wrapper align_none\"><a class=\"w-btn us-btn-style_1 us_custom_92b2762d\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/devowl.io\/wordpress-real-media-library\/\"><span class=\"w-btn-label\">Discover Real Media Library<\/span><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3>Using Medialist in conjunction with Real Media Library<\/h3>\n<p>To take the download game to the next level, you can also use Medialist together with Real Media Library. This has the advantage that you can offer your visitors entire folders from your media library in file lists for download.<\/p>\n<p>You can read about how to do this in detail in our article about <a href=\"https:\/\/devowl.io\/knowledge-base\/real-media-library-folders-files-in-website-frontend\/\" target=\"_blank\" rel=\"noopener\">Real Media Library integration in Medialist<\/a>.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"author":1,"featured_media":235578,"template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Provide files for download on your WordPress website","_seopress_titles_desc":"We show you how to make files available for download on your WordPress website and which plugins can be useful for this!","_seopress_robots_index":"","inline_featured_image":false,"restrictTranslations":["en_US","de_DE"],"footnotes":""},"class_list":["post-235318","blog","type-blog","status-publish","has-post-thumbnail","hentry","content-cluster-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/235318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":16,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/235318\/revisions"}],"predecessor-version":[{"id":235341,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/blog\/235318\/revisions\/235341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media\/235578"}],"wp:attachment":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media?parent=235318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}